javascript表格隔行变色加鼠标移入移出及点击效果的方法

2019-11-20 12:43:17

字体：大中小

来源：转载

供稿：网友

本文实例讲述了javascript表格隔行变色加鼠标移入移出及点击效果的方法。分享给大家供大家参考。具体分析如下：

表格隔行变色，也是一个提高用户体验的js效果。

效果实现：

表格奇偶行的颜色不一样。这样可以防止用户看数据时串行。
鼠标移入某行时变颜色，移出再变回来。这样可以让用户清楚的知道自己正在看哪一行。

表格点击变色。便于用户选中自己想保留的项。

说明：

i%2 每个数和2取模的值，只有0和1两种，这样就可以实现隔行变色的效果
tables_li[i].onoff = 1; 为了实现点击变色，鼠标移入移出时，颜色不被覆盖。

上代码:

<!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=gb2312"/><title>无标题文档</title><style>table{border-collapse:collapse}table td{height:26px;font-size:12px;color:#333;border:1px solid #09c;text-align:center;padding:0 10px;}</style></head><body><script>window.onload = function(){ var tables = document.getElementById("tables"); var tables_li = tables.getElementsByTagName("tr"); var i=0; var len = tables_li.length; for(i=0; i<len; i++){  tables_li[i].onoff = 1;  tables_li[i].index = i;  tables_li[i].style.backgroundColor = i%2?"#ace":"";  tables_li[i].onmouseover = function(){   if(this.onoff == 1){   this.style.backgroundColor = "#06c";   }  }  tables_li[i].onmouseout = function(){   if(this.onoff == 1){    this.style.backgroundColor = this.index%2?"#ace":"";   }  }  tables_li[i].onclick = function(){   if(this.onoff == 1){    this.onoff = 0;    this.style.backgroundColor = "#069";   }else{    this.onoff = 1;    this.style.backgroundColor = this.index%2?"#ace":"";   }  } }}</script><table width="500" border="0" align="center"cellpadding="0" cellspacing="0" id="tables"> <tr> <td>1</td> <td>内容内容</td> </tr> <tr> <td>2</td> <td>内容内容</td> </tr> <tr> <td>3</td> <td>内容内容</td> </tr> <tr> <td>4</td> <td>内容内容</td> </tr> <tr> <td>5</td> <td>内容内容</td> </tr> <tr> <td>6</td> <td>内容内容</td> </tr> <tr> <td>7</td> <td>内容内容</td> </tr> <tr> <td>8</td> <td>内容内容</td> </tr> <tr> <td>9</td> <td>内容内容</td> </tr> <tr> <td>10</td> <td>内容内容</td> </tr></table></body></html>

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：javascript基本包装类型介绍

下一篇：js改变embed标签src值的方法