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

更新时间：2015年04月10日 12:14:26 作者：jingangel

这篇文章主要介绍了javascript表格隔行变色加鼠标移入移出及点击效果的方法,涉及javascript实现隔行变色及鼠标点击效果的相关技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

JS样式获取的封装方法实例详解
这篇文章主要介绍了JS样式获取的封装方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-09-09
小程序跳转H5页面的方法步骤
这篇文章主要介绍了小程序跳转H5页面的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
一不小心就做错的JS闭包面试题
这篇文章为大家推荐了许多经典的JS闭包面试题，也可以说是一不小心就做错的JS闭包面试题，感兴趣的小伙伴们可以参考一下，自己试着解答这些大部分人都会做错的JS闭包面试题，检验自己的知识水平
2015-11-11
js对象基础实例分析
这篇文章主要介绍了js对象基础,以实例形式分析了js对象的创建、读取及遍历等技巧,需要的朋友可以参考下
2015-01-01
trackingjs+websocket+百度人脸识别API实现人脸签到
这篇文章主要介为大家详细绍了trackingjs+websocket+百度人脸识别API实现人脸签到功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
ES6新特性一： let和const命令详解
这篇文章主要介绍了ES6新特性中的let和const命令,结合实例形式分析了let和const命令的功能、使用方法与相关注意事项,需要的朋友可以参考下
2017-04-04
JS实现的走迷宫小游戏完整实例
这篇文章主要介绍了JS实现的走迷宫小游戏,涉及javascript键盘事件响应及页面元素动态变换相关操作技巧,需要的朋友可以参考下
2017-07-07
JavaScript实现移动端短信验证码流程介绍
这篇文章主要为大家详细介绍了javascript实现移动端发送短信验证码案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-10-10
怎样在CocosCreator中使用物理引擎关节
这篇文章主要介绍了怎样在CocosCreator中使用物理引擎关节，对物理引擎感兴趣的同学，着重要看一下
2021-04-04
原生js获取left值和top值的三种方法
下面小编就为大家带来一篇原生js获取left值和top值的三种方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08