位置：首页>> 网络编程>> JavaScript>> 发一段鼠标掠过表格行颜色改变的代码

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

作者：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>

投稿

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

猜你喜欢