比较高效的表格行背景变色及选定高亮JS

[ 2008-08-22 11:14:40 | 作者: 景裔 ]

字体大小: 大 | 中 | 小

　　本文原创，转载请注明出处
　　一个项目要用，又不想用jquery之类的东东。先去网上搜索了下，找到了不少在CSS中执行JS的表格行变色方式，不过这类方式在表格行多的时候相当卡，就自己按着最原始的方式倒腾了个出来献给广大的JS小白们（本人也算上JS小白之一 [lol]

），在IE7和firefox3中测试正常。

　　这段JS放在head中

 //点击当前选中行的时候设置当前行的颜色，同时恢复除当前行外的行的颜色及鼠标事件
 function selectRow(target)
 {
 var sTable = document.getElementById("ServiceListTable")
 for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行
 {
 if (sTable.rows[i] != target) //判断是否当前选定行
 {
 sTable.rows[i].bgColor = "#ffffff"; //设置背景色
 sTable.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件
 sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件
 }
 else
 {
 sTable.rows[i].bgColor = "#d3d3d3";
 sTable.rows[i].onmouseover = ""; //去除鼠标事件
 sTable.rows[i].onmouseout = ""; //去除鼠标事件
 }
 }
 }
 //移过时tr的背景色
 function rowOver(target)
 {
 target.bgColor='#e4e4e4';
 }
 //移出时tr的背景色
 function rowOut(target)
 {
 target.bgColor='#ffffff';
 }
 //恢复tr的的onmouseover事件配套调用函数
 function resumeRowOver()
 {
 rowOver(this);
 }
 //恢复tr的的onmouseout事件配套调用函数
 function resumeRowOut()
 {
 rowOut(this);
 }

　　关于最后两个函数resumeRowOver和resumeRowOut为什么这样写参考我之前写的通过js给页面元素添加事件
　　对应的表格HTML

 <table width="100%" border="0" cellspacing="0" cellpadding="0" id="ServiceListTable">
 <tr>
 <th>服务事项</th>
 <th>N</th>
 <th>状态</th>
 <th>办结</th>
 <th>资料</th>
 </tr>
 <tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
 <td>相关内容</td>
 <td align="center">&nbsp;</td>
 <td align="center">&nbsp;</td>
 <td align="center">&nbsp;</td>
 <td align="center">&nbsp;</td>
 </tr>
 <tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
 <td>相关内容</td>
 <td align="center">&nbsp;</td>
 <td align="center">&nbsp;</td>
 <td align="center">&nbsp;</td>
 <td align="center">&nbsp;</td>
 </tr>
 <tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
 <td>相关内容</td>
 <td align="center">&nbsp;</td>
 <td align="center">&nbsp;</td>
 <td align="center">&nbsp;</td>
 <td align="center">&nbsp;</td>
 </tr>
 <tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
 <td>相关内容</td>
 <td align="center">&nbsp;</td>
 <td align="center">&nbsp;</td>
 <td align="center">&nbsp;</td>
 <td align="center">&nbsp;</td>
 </tr>
 </table>

[最后编辑于景裔, at 2008-08-22 11:29:07]