JS实现表格隔行变色
本文实例为大家分享了JS实现表格隔行变色的具体代码，供大家参考，具体内容如下
用到的鼠标事件：（1）鼠标经过 onmouseover；（2）鼠标离开 onmouseout
核心思路：鼠标经过 tr 行的时候，当前行会改变背景颜色，鼠标离开的时候去掉背景颜色。
注意：第一行（thead 里面的行）不需要变换颜色，改变的是 tbody 里面的行。
1、获取元素，获取的是 tbody里面的行。
2、循环注册绑定事件，将 tbody 里面全部的行都得到，然后全部都注册鼠标经过和离开事件。
3、所有行绑定鼠标经过事件，鼠标经过当前元素（this）改变颜色；
4、所有行绑定鼠标离开事件，鼠标离开当前元素（this）没有颜色；
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格隔行变色</title>
<style type="text/css">
*{
margin:0;padding: 0;
}
table{
width:500px;
position:relative;
margin:100px auto;
border-collapse:collapse;
/*合并表格单一边框*/
border:1px solid #d7d7d7;
}
thead tr{
background-color:#ccc;
height:30px;
}
table tr{
text-align: center;
height:30px;
}
.bg{
background: #eee;
}
</style>
</head>
<body>
<table border=1>
<thead>
<tr>
<td width="40">序号</td>
<td width="100">前端单词</td>
<td width="80">基本释义</td>
<td width="50">长度</td>
<td width="">补充</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>select</td>
<td>选择</td>
<td>6</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>target</td>
<td>目标</td>
<td>6</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>input </td>
<td>输出</td>
<td>5</td>
<td>-</td>
</tr>
<tr>
<td>4</td>
<td>button</td>
<td>按钮</td>
<td>8</td>
<td>-</td>
</tr>
<tr>
<td>5</td>
<td>checkbox</td>
<td>复选框</td>
<td>8</td>
<td>-</td>
</tr>
</tbody>
</table>
<script>
//1、获取tbody里面的所有的行
var trs = document.querySelector('tbody').querySelectorAll('tr');
//2、利用循环注册事件
for(var i = 0;i<trs.length;i++){
var bgc = function(e){this.className = 'bg';}
trs[i].addEventListener('mouseover',bgc)
trs[i].onmouseout = function(){
this.className = '';
}
}
</script>
</body>
</html>
显示效果：
当鼠标滑过时：
当鼠标离开时：
当然这个效果使用 CSS的 :hover 可以非常简单的实现（tbody tr:hover{background: #eee;}），但是在这个例子中主要想体现的是使用JS事件和排他思想实现的效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javascript表格隔行变色加鼠标移入移出及点击效果的方法
本文实例讲述了javascript表格隔行变色加鼠标移入移出及点击效果的方法.分享给大家供大家参考.具体分析如下: 表格隔行变色,也是一个提高用户体验的js效果. 效果实现: 表格奇偶行的颜色不一样.这样可以防止用户看数据时串行. 鼠标移入某行时变颜色,移出再变回来.这样可以让用户清楚的知道自己正在看哪一行. 表格点击变色.便于用户选中自己想保留的项. 说明: i%2 每个数和2取模的值,只有0和1两种,这样就可以实现隔行变色的效果 tables_li[i].onoff = 1; 为了实现
-
一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现
第一个太简单就不说了,第二个也很简单,但每个人都有不同的实现方法,下面给一个比较简洁的做法,支持IE6.IE7.FF2,其他浏览器未测试(可以扩展一下用到ASP.NET的GridView里): 鼠标划过表格行变色-简洁实现 #tb{width:666px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;} #tb th{background:#EEE;border-bottom:1px solid #CCC;paddin
-
原生JS操作网页给p元素添加onclick事件及表格隔行变色
1. 给网页中的所有p元素添加onclick事件: 复制代码 代码如下: <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>Insert title here</title> <!-- <script src="jQuery/jquery-1.10.2.
-
javascript实现table表格隔行变色的方法
本文实例讲述了javascript实现table表格隔行变色的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>table间隔色</title
-
用JS控制表格的逐行变色的表单
优点: 1.代码干净,无冗余标签. 2.样式,结构分离(为了方便,样式用内联的形式,实现应用时可以用外联方式引用.) 3.用JS控制表格的逐行变色 4.支持选中项高亮 5.支持checkbox的全选/取消功能 6.分页标签已经做好,没有做后台代码(以后有时间更新) 7.兼容性测试:已测试过ie5.01 ie5.5 ie6 ie7 ff2 opera浏览器 友好度良好的表格 *{font-family:Tahoma, Arial, Helvetica, Sans-serif,"宋体";}
-
JS控制表格隔行变色
<table width="800" border="0" cellpadding="0" cellspacing="0"> <tr> <td>不变色</td> </tr> <tbody id="goaler"> <tr> <td>xxxxxxxx</td
-
js实现鼠标经过表格行变色的方法
本文实例讲述了js实现鼠标经过表格行变色的方法.分享给大家供大家参考.具体实现方法如下: <script type=text/javascript> <!-- (function(){ var rows = document.getElementById("listdata"); var add = function(){ this.style.backgroundColor="#f3f3f1"; }; var del = function(){
-
高效的表格行背景隔行变色及选定高亮的JS代码
这段JS放在head中 复制代码 代码如下: //点击当前选中行的时候设置当前行的颜色,同时恢复除当前行外的行的颜色及鼠标事件 function selectRow(target) { var sTable = document.getElementById("ServiceListTable") for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行 { if (sTable.rows[i] != target) //判断是否当前
-
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
// 版本: 1.0 // 日期: 2007/08/01 // 备注: 需要jQuery库 // 参考: Dodo(tableRowCheckboxToggle) 和 softcomplex(tigra_tables) function Kin_Tables( Kin_Table_GetTableMethod, //得到Table的方法 同$()功能 必选参数 Kin_Table_Header_Offset, //从
-
js兼容标准的表格变色效果
<!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-