高效的表格行背景隔行变色及选定高亮的JS代码
发布时间:2020-12-14 23:00:08 所属栏目:资源 来源:网络整理
导读:这段JS放在head中 复制代码 代码如下: //点击当前选中行的时候设置当前行的颜色,同时恢复除当前行外的行的颜色及鼠标事件 function selectRow(target) { var sTable = document.getElementById("ServiceListTable") for(var i=1;isTable.rows.length;i++) //
这段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"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> </tr> <tr onmouSEOver="rowOver(this)" onmouSEOut="rowOut(this)" onclick="selectRow(this)"> <td>相关内容</td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> </tr> <tr onmouSEOver="rowOver(this)" onmouSEOut="rowOut(this)" onclick="selectRow(this)"> <td>相关内容</td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> </tr> <tr onmouSEOver="rowOver(this)" onmouSEOut="rowOut(this)" onclick="selectRow(this)"> <td>相关内容</td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> </tr> </table> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |