关于<tr onmouseover/out>在多个td里的问题

Kennzj 楼主

tr不会变色..>___<
把onmouseover="this.className='row1'" onmouseout="this.className='row'"放到TD里就可以.
有没有什么解决的好方法....
望高手解答,最好能告诉我为什么...小弟弟在这里谢谢各位了.

<style> .row{background:#000;} .row1{background-color:#ff0000;} </style> <table width="500" cellpadding="0" cellspacing="0"> <tr onmouseover="this.className='row1'" onmouseout="this.className='row'"><td bgcolor="#000000"> </td><td bgcolor="#000000"=""> </td><td bgcolor="#000000"> </td><td bgcolor="#000000"> </td></tr> <tr onmouseover="this.className='row1'" onmouseout="this.className='row'"> <td bgcolor="#000000"> </td> <td bgcolor="#000000"> </td> <td bgcolor="#000000"> </td> <td bgcolor="#000000"> </td> </tr> <tr onmouseover="this.className='row1'" onmouseout="this.className='row'"> <td bgcolor="#000000"> </td> <td bgcolor="#000000"> </td> <td bgcolor="#000000"> </td> <td bgcolor="#000000"> </td> </tr> </table>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

[ 本帖最后由 Kennzj 于 2006-9-2 23:40 编辑 ]

zbm2001z

这里先介绍一种：

<style> .row{background:#000;color:#fff;} .row1{background-color:#ff0000;} </style> <table width="500" cellpadding="0" cellspacing="0" id="eventable"> <tr><td>指定表格行响应鼠标变色</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> <tr> <td>指定表格行响应鼠标变色</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>指定表格行响应鼠标变色</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> <script type="text/javascript"> var tr=document.getElementById("eventable").getElementsByTagName("tr"); for(var j=0;j<tr.length;j++){ tr[j].className="row"; tr[j].onmouseover=function(){this.className="row1";} tr[j].onmouseout=function(){this.className="row";} } </script>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

[ 本帖最后由 zbm2001z 于 2006-9-3 00:15 编辑 ]

marvellous

楼上的那个并未变色

<table border="0" cellspacing="4"> <tr onMouseOver="style.backgroundColor='#FF0000';" onMouseOut="style.backgroundColor='#ffff00';"><td>这行变色</td><td>这行变色</td></tr> <tr onMouseOver="style.backgroundColor='#FF0000';" onMouseOut="style.backgroundColor='#ffff00';"><td>这行变色</td><td>这行变色</td></tr> <tr onMouseOver="style.backgroundColor='#FF0000';" onMouseOut="style.backgroundColor='#ffff00';"><td>这行变色</td><td>这行变色</td></tr> </table>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

Kennzj 楼主

大半夜经典居然有人帮忙.小弟实在太感动了!!!

谢谢...

顺便问一下我为什么变不了吗？

zbm2001z

楼上的方法如果是表格的行很多，如果在每行里都加上行为，就不是很方便了。

Kennzj 楼主

为什么我的就不行呀....
3楼的方法比较好....感动中T____T

zbm2001z

顺便问一下我为什么变不了吗？

你控制的是tr的背景色改变，td的背景色未变啊

Kennzj 楼主

原帖由 zbm2001z 于 2006-9-3 00:22 发表


你控制的是tr的背景色改变，td的背景色未变啊

谢谢版主.......
经典的版主真负责....

再次感动中....小弟我在加班先闪了....

Kennzj 楼主

onMouseOver="style.backgroundColor='#FF0000';" onMouseOut="style.backgroundColor='#ffff00';"

这个能不能写成用样式表写入的....这样确实不好...修改起来不方便呀.....

marvellous

用这一种好一点

<script> function overIt(){ var the_obj = event.srcElement; if(the_obj.tagName.toLowerCase() == "td"){ the_obj=the_obj.parentElement; the_obj.oBgc=the_obj.currentStyle.backgroundColor; the_obj.oFc=the_obj.currentStyle.color; the_obj.style.backgroundColor='red'; the_obj.style.color='blue'; the_obj.style.textDecoration='underline'; } } function outIt(){ var the_obj = event.srcElement; if(the_obj.tagName.toLowerCase() == "td"){ the_obj=the_obj.parentElement; the_obj.style.backgroundColor=the_obj.oBgc; the_obj.style.color=the_obj.oFc; the_obj.style.textDecoration=''; } } </script> <table border=1 width=400 onmouseover="overIt()" onmouseout="outIt()"> <tr bgColor=#111111> <td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td></tr> <tr bgColor=#222222> <td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td></tr> <tr bgColor=#333333> <td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td></tr> <tr bgColor=#444444> <td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td></tr> <tr bgColor=#555555> <td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td></tr> <tr bgColor=#666666> <td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td></tr> <tr bgColor=#777777> <td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td></tr> <tr bgColor=#888888> <td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td></tr> <tr bgColor=#999999> <td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td></tr> <tr bgColor=#aaaaaa> <td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td></tr> <tr bgColor=#bbbbbb> <td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td></tr> <tr bgColor=#cccccc> <td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td></tr> <tr bgColor=#dddddd> <td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td></tr> <tr bgColor=#eeeeee> <td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td></tr> <tr bgColor=#ffffff> <td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td></tr> </table>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

zbm2001z

不能，IE有样式表达式但在这里不予答复——这是“网页标准化专栏”请原谅，
你可以去“前台制作与脚本专栏”板块问问，我要是路过那里倒是乐意为你解答。

zbm2001z

10楼请注意：
请不要用不符合标准的脚本来解答问题，作为版主更应该懂得这个板块的意义。

snwebsite

我也来凑个热闹：

<style> table { border:1px solid red; border-collapse:collapse } tr { star : expression(onmouseover=function() {this.style.background="red"}, onmouseout=function(){this.style.background="white"}) } </style> <table> <tr><td>这行变色</td><td>这行变色</td></tr> <tr><td>这行变色</td><td>这行变色</td></tr> <tr><td>这行变色</td><td>这行变色</td></tr> <tr><td>这行变色</td><td>这行变色</td></tr> <tr><td>这行变色</td><td>这行变色</td></tr> </table>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

zbm2001z

楼上又在使用IE的私有属性。在“前台制作与脚本专栏”回复比较合适，在这里应算是误导了！

snwebsite

楼主发的问题本来一直就是JS的问题，你怎么不移动到JS版了，反而让大家到JS区发。。。。—_—!!

zbm2001z

我想是这样：
网页标准化并不代表不能使用页面脚本，在“网页标准化专栏 ”这个板块，我们尽量让它符合W3C的DOM标准和ECMAscript语法，如有必要再兼容一下部分主流浏览器的私有语法（如IE5、IE6）。

[ 本帖最后由 zbm2001z 于 2006-9-4 10:14 编辑 ]

jevin

到底上面哪个是是符合标准啊，用JS就不符合标准吗？不明白啊，谁具体说一下，我一直喜欢用3楼的那种