javascript对table设置样式的问题..

下面是完整的代码:
我是想通过,鼠标移到tr上面,把背景样式改变,然后,鼠标单击的时候,也该表背景颜色,
现在这一步已经完成,

还有一个就是鼠标移到其他行,又需要恢复,onmouseover和 onmouseOut 的样式。 这个要怎么实现?请教一下...



<br> //单击时,改变样式;<br> function onClickChangeStyle(obj){<br> //获取表格对象;<br> var tab = document.getElementById(&quot;tab&quot;);</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&lt;tablRows;i=i+1){ if(currentRowIndex == i){ //为选中的当前,设置css样式; tab.rows[i].style.cssText=&quot;background-color:00FFFF&quot;; }else{ //把没有选中的行的背景样式设置为白色; tab.rows[i].style.cssText=&quot;background-color:white&quot;; tab.rows[i].onmouseover = function(){ this.className=&quot;displayStyle&quot;; //tab.rows[i].className=&quot;displayStyle&quot;; } //绑定鼠标移开事件,并且设置样式为白色; tab.rows[i].onmouseout = function() { this.cssText=&quot;background-color:white;&quot;; //tab.rows[i].className=&quot;hideStyle&quot;; } } } } &lt;/script&gt; &lt;style&gt; .displayStyle{ background-color:blue; } .hideStyle{ background-color:white; } .onClickStyle{ background-color:red; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;form name=&quot;myForm&quot;&gt; &lt;table width=&quot;100%&quot; id=&quot;tab&quot; name=&quot;tab&quot;&gt; &lt;tr id=&quot;tr1&quot; onmouseOver=this.className=&quot;displayStyle&quot; onmouseOut=this.className=&quot;hideStyle&quot; onclick=&quot;onClickChangeStyle(this)&quot;&gt; &lt;td&gt;&lt;input type=&quot;checkbox&quot; value=&quot;11&quot;/&gt;&lt;/td&gt; &lt;td&gt;100&lt;/td&gt; &lt;td&gt;张三&lt;/td&gt; &lt;td&gt;15&lt;/td&gt; &lt;td&gt;湖南株洲&lt;/td&gt; &lt;/tr&gt; &lt;tr id=&quot;tr2&quot; onmouseOver=this.className=&quot;displayStyle&quot; onmouseOut=this.className=&quot;hideStyle&quot; onclick=&quot;onClickChangeStyle(this)&quot;&gt; &lt;td&gt;&lt;input type=&quot;checkbox&quot; value=&quot;22&quot;/&gt;&lt;/td&gt; &lt;td&gt;100&lt;/td&gt; &lt;td&gt;李四&lt;/td&gt; &lt;td&gt;15&lt;/td&gt; &lt;td&gt;湖南长沙&lt;/td&gt; &lt;/tr&gt; &lt;tr id=&quot;tr3&quot; onmouseOver=this.className=&quot;displayStyle&quot; onmouseOut=this.className=&quot;hideStyle&quot; onclick=&quot;onClickChangeStyle(this)&quot;&gt; &lt;td&gt;&lt;input type=&quot;checkbox&quot; value=&quot;33&quot;/&gt;&lt;/td&gt; &lt;td&gt;100&lt;/td&gt; &lt;td&gt;王五&lt;/td&gt; &lt;td&gt;15&lt;/td&gt; &lt;td&gt;湖南湘潭&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; &lt;/body&gt; </code></pre> <p></html></p>

2个回答

//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";


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"; } } .displayStyle{ background-color:blue; } .hideStyle{ background-color:white; } .onClickStyle{ background-color:red; }

100 张三 15 湖南株洲
100 李四 15 湖南长沙
100 王五 15 湖南湘潭


Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问