一个项目要用,又不想用 jquery 之类的东东。先去网上搜索了下,找到了不少在 CSS 中执行 JS 的表格行变色方式,不过这类方式在表格行多的时候相当卡,在 IE7 和 firefox3 中测试正常。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这段 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>
来源: