发一段鼠标掠过表格行颜色改变的代码

作者：wangjianbo 来源：51js 时间：2010-07-02 12:59:00　

写这段代码的原因是昨天项目中遇到的一个问题。一同事要求写一个效果要求鼠标掠过表格行
该行颜色改变以突出显示。这个倒不难，那哥们直接为每个Tr绑定了omouseover、onmouseout函数，两个函数一个设置颜色，一个取消设置，很容易就完成了。

但后来麻烦了，因为我们的那个表格式动态有些行会动态的添加和删除，如果用这种方法每添加一行还需要为该行注册两个函数比较麻烦，所以就写了这段代码。我认为把事件注册到Table上，然后事件触发的时候查找是哪行触发事件，这样要简单的多，也通用的多。当然解决的方法很多，希望大家都写一些

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">function inserRow(){var tbl= document.getElementById("table1");var rowCount= tbl.rows.length; var tr= tbl.insertRow(rowCount);var rowNum= rowCount + 1;tr.insertCell(0).innerHTML= rowNum + "1";tr.insertCell(1).innerHTML= rowNum + "2";tr.insertCell(2).innerHTML= rowNum + "3";}window.onload = function(){var tbl = document.getElementById("table1");var selectColor= "#80FFFF"; tbl.curentRow = null;tbl.onmousemove = function(e){var evt= e || window.event;var srcEl= evt.target || evt.srcElement;if( srcEl.tagName == "TABLE" ) return;var curentRow = (function(){var parNode = srcEl;while(parNode){if(parNode.tagName == "TR") break;parNode = parNode.parentNode;};return parNode;})();var rowIdx = curentRow.rowIndex;var rowCount= this.rows.length; var nextRow = rowIdx < rowCount - 1 ? this.rows[rowIdx+1]: null;var preRow = rowIdx > 0? this.rows[rowIdx-1]: null;if( preRow) preRow.style.backgroundColor= "";if( nextRow ) nextRow.style.backgroundColor= ""; curentRow.style.backgroundColor = selectColor;this.curentRow = curentRow;};tbl.onmouseout = function(){var curentRow = this.curentRowif( curentRow ) curentRow.style.backgroundColor = "";};}</script></head><body><input type="button" value="添加行" onclick="inserRow()"/><table id="table1" width="500" border="1" cellpadding="0" cellspacing="00" style="border-collapse:collapse"> <tr> <td>11</td> <td>12</td> <td>13</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> </tr> <tr> <td>41</td> <td>42</td> <td>43</td> </tr></table></body></html>

标签：鼠标,表格,颜色

投稿

发一段鼠标掠过表格行颜色改变的代码

猜你喜欢

SQL Server如何才能访问Sybase中的表

微信小程序可滑动月日历组件使用详解

python处理json文件的四个常用函数

Pandas将列表（List）转换为数据框（Dataframe）

在ASP.NET 2.0中操作数据之三十七：DataList批量更新

在pandas多重索引multiIndex中选定指定索引的行方法

Python自动化办公之创建PPT文件

pandas和spark dataframe互相转换实例详解

mysql 5.7.21 winx64免安装版配置方法图文教程

lnmp重置mysql数据库root密码的两种方法

详解BurpSuite安装和配置

JS中ESModule和commonjs介绍及使用区别

一文教你用Python中progress库实现进度条

IDEA使用properties配置文件进行mysql数据库连接的教程图解

scala中停止循环的三种方式(推荐)

深入分析Python中Lambda函数的用法

asp被杀毒软件误删的解决方法

这种sql写法真的会导致索引失效吗

MySQL学习之索引及优化

mdf文件和ldf文件导入到sql server 2005实现语句