下面是完整的代码:
我是想通过,鼠标移到tr上面,把背景样式改变,然后,鼠标单击的时候,也该表背景颜色,
现在这一步已经完成,
还有一个就是鼠标移到其他行,又需要恢复,onmouseover和 onmouseOut 的样式。 这个要怎么实现?请教一下...
<br> //单击时,改变样式;<br> function onClickChangeStyle(obj){<br> //获取表格对象;<br> var tab = document.getElementById("tab");</p> <pre><code> //获取当前行选择下标; var currentRowIndex = obj.rowIndex; //获取表格所有行数; var tablRows = tab.rows.length; //获取表格第一行,第一列的值; //var firstCellValue = tab.rows[0].cells[0].innerHTML; //获取表格的第一行,第一列的第一个元素的值; //var firstChildValue = tab.rows[0].cells[0].firstChild.value; //循环表格的所有行;并且选择的当前行,改变背景颜色; for(var i = 0;i<tablRows;i=i+1){ if(currentRowIndex == i){ //为选中的当前,设置css样式; tab.rows[i].style.cssText="background-color:00FFFF"; }else{ //把没有选中的行的背景样式设置为白色; tab.rows[i].style.cssText="background-color:white"; tab.rows[i].onmouseover = function(){ this.className="displayStyle"; //tab.rows[i].className="displayStyle"; } //绑定鼠标移开事件,并且设置样式为白色; tab.rows[i].onmouseout = function() { this.cssText="background-color:white;"; //tab.rows[i].className="hideStyle"; } } } } </script> <style> .displayStyle{ background-color:blue; } .hideStyle{ background-color:white; } .onClickStyle{ background-color:red; } </style> </head> <body> <form name="myForm"> <table width="100%" id="tab" name="tab"> <tr id="tr1" onmouseOver=this.className="displayStyle" onmouseOut=this.className="hideStyle" onclick="onClickChangeStyle(this)"> <td><input type="checkbox" value="11"/></td> <td>100</td> <td>张三</td> <td>15</td> <td>湖南株洲</td> </tr> <tr id="tr2" onmouseOver=this.className="displayStyle" onmouseOut=this.className="hideStyle" onclick="onClickChangeStyle(this)"> <td><input type="checkbox" value="22"/></td> <td>100</td> <td>李四</td> <td>15</td> <td>湖南长沙</td> </tr> <tr id="tr3" onmouseOver=this.className="displayStyle" onmouseOut=this.className="hideStyle" onclick="onClickChangeStyle(this)"> <td><input type="checkbox" value="33"/></td> <td>100</td> <td>王五</td> <td>15</td> <td>湖南湘潭</td> </tr> </table> </form> </body> </code></pre> <p></html></p>