Js实现表格隔行变色,鼠标经过时高亮显示的代码

发布时间:2019-08-22编辑:脚本学堂
为大家介绍一个用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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>表格隔行变色,鼠标经过时高亮显示-www.jb200.com</title>
<style type="text/css">
 * {
  padding:0;
  margin:0;
 }
 body {
  font-family:verdana;
  font-size:12px;
 }
 .content {
  width:550px;
  margin:20px auto;
 }
 .content h1 {
  font-family:'微软雅黑';
  font-size:18px;
  padding-bottom:5px;
 }
 table {
  width:100%;
 }
 th, td {
  padding:6px 0;
  text-align:center;
 }
 th {
  background-color:#007D28;
  color:#ffffff;
 }
 
 tr {
  background-color:#E8FFE8;
 }
 
 .odd {
  background-color:#FFF3EE;
 }
 
 .highlight {
  background-color:#E0E0E0;
}
</style>
<script type="text/javascript">
 //动态给js添加class属性
 function addClass(element, value) {
  if(!element.className) {
   element.className = value; //如果element本身不存在class,则直接添加class为value的值
  } else {
   element.className += " "+value; //如果element之前有一个class值,注意中间要多一个空格,然后再加上value的值
  }
 }
 
 //隔行换色
 function stripeTable() {
  var tables = document.getElementsByTagName("table"); //遍历文档中的所有table
  for(var i=0; i<tables.length; i++) {
   var rows = document.getElementsByTagName("tr");
   for(var j=0; j<rows.length; j++) {
    if(j%2 == 0) {
     addClass(rows[j], "odd"); //如是偶数行,则添加class为odd的属性
     //rows[j].setAttribute("class", "odd");
    }
   }
  }
 }
 
 //鼠标经过时高亮显示
 function highlightRows() {
  var rows = document.getElementsByTagName("tr");
  for(var i=0; i<rows.length; i++) {
   rows[i].oldClassName = rows[i].className; //首先保存之前的class值
   rows[i].onmouseover = function() {
    addClass(this, "highlight"); //鼠标经过时添加class为highlight的值
   }
   rows[i].onmouseout = function() {
    this.className = this.oldClassName; //鼠标离开时还原之前的class值
   }
  }
 }
 
 window.onload = function() {
  stripeTable();
  highlightRows();
 }
</script>
</head>
<body>
<div class="content">
 <h1>会员信息表</h1>
 <table summary="user infomation table">
  <thead>
   <tr>
    <th>会员ID</th>
    <th>会员名</th>
    <th>邮箱</th>
    <th>会员组</th>
    <th>城市</th>
    <th>注册时间</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>126</td>
    <td>webw3c</td>
    <td>este@126.com</td>
    <td>普通会员</td>
    <td>武汉</td>
    <td>2011-04-01</td>
   </tr>
   <tr>
    <td>127</td>
    <td>test001</td>
    <td>test001@126.com</td>
    <td>普通会员</td>
    <td>北京</td>
    <td>2011-04-03</td>
   </tr>
   <tr>
    <td>128</td>
    <td>wuliao</td>
    <td>wuliao@126.com</td>
    <td>普通会员</td>
    <td>南昌</td>
    <td>2011-04-04</td>
   </tr>
   <tr>
    <td>129</td>
    <td>tired</td>
    <td>tired@126.com</td>
    <td>中级会员</td>
    <td>北京</td>
    <td>2011-04-06</td>
   </tr>
   <tr>
    <td>130</td>
    <td>tiredso</td>
    <td>tireds0@126.com</td>
    <td>中级会员</td>
    <td>武汉</td>
    <td>2011-04-06</td>
   </tr>
   <tr>
    <td>131</td>
    <td>javascript</td>
    <td>js2011@126.com</td>
    <td>中级会员</td>
    <td>武汉</td>
    <td>2011-04-08</td>
   </tr>
   <tr>
    <td>132</td>
    <td>jquery</td>
    <td>jQuery@126.com</td>
    <td>高级会员</td>
    <td>北京</td>
    <td>2011-04-12</td>
   </tr>
  </tbody>
 </table>
</div>
</body>
</html>

效果图如下所示:
表格隔行变色

您可能感兴趣的文章:
js 隔行变色的最简单代码
js 隔行变色 鼠标经过变色的代码
JS控制表格隔行变色的实现代码
js 隔行变色与鼠标悬停自动变色的实现代码
js+css 控制表格隔行变色与单行高亮的代码
Js与Css结合实现表格隔行换色(隔行变色)的代码
Js表格隔行换色(隔行变色)代码一例
javascript实现隔行变色函数代码一例
表格隔行变色的js实现代码