问题描述
下面是完整的代码:我是想通过，鼠标移到tr上面，把背景样式改变，然后,鼠标单击的时候，也该表背景颜色,现在这一步已经完成，还有一个就是鼠标移到其他行,又需要恢复,onmouseover和 onmouseOut 的样式。 这个要怎么实现?请教一下...<html><head><script> //单击时,改变样式;function onClickChangeStyle(obj){ //获取表格对象; var tab = document.getElementById("tab"); //获取当前行选择下标; 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></html> 问题补充：xxq 写道
解决方案
//insertRow,insertCell都要加标添加下标的，还有样式名称怎么能加方法呢//this.className="onClickChangeStyle(this)";var tab = document.getElementById('tab');var rowIndex = tab.rows.length;//添加一行;var tr = tab.insertRow(3);tr.onmouseOver = tr.className="displayStyle" ;tr.onmouseOut = tr.className="hideStyle" ;tr.onclick=function (){onClickChangeStyle(this);}var td1 = tr.insertCell(0);td1.innerHTML="11";var td2 = tr.insertCell(1);td2.innerHTML="22";var td3 = tr.insertCell(2);td3.innerHTML="33";var td4 = tr.insertCell(3); td4.innerHTML="44";
解决方案二：
<html><head><script>var selectedObj=null; //单击时,改变样式;function onClickChangeStyle(obj){ //获取表格对象; var tab = document.getElementById("tab"); //获取当前行选择下标; 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"; selectedObj=tab.rows[i]; tab.rows[i].className="onClickStyle"; }else{ //把没有选中的行的背景样式设置为白色; // tab.rows[i].style.cssText="background-color:white"; tab.rows[i].className="hideStyle"; } } if(selectedObj){selectedObj.className="onClickStyle"; }}function mout(oThis){oThis.className="hideStyle";if(oThis == selectedObj){oThis.className="onClickStyle";}}function mover(oThis){oThis.className="displayStyle";if(oThis == selectedObj){oThis.className="onClickStyle";}}</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='mover(this)' onmouseOut='mout(this)' 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='mover(this)' onmouseOut='mout(this)' 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='mover(this)' onmouseOut='mout(this)' onclick="onClickChangeStyle(this)"><td><input type="checkbox" value="33"/></td><td>100</td><td>王五</td><td>15</td><td>湖南湘潭</td></tr></table></form></body></html>