利用JS实现表格隔行换色，鼠标经过时高亮显示

稿源：互联网 2022-04-02 21:40:12 点击： 6841 撤稿纠错

表格的布局经常可见，当表格的行数非常多的，很容易引起用户的视觉疲劳，而且容易让用户把相邻两行的数据看错。我们可以通过隔行换色以及高亮的方法的来改善用户体验！

以下讨论的是和隔行换色高亮显示相关的利用JS实现表格隔行换色，鼠标经过时高亮显示教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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>stripe tables</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实现表格隔行换色，鼠标经过时高亮显示的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011041469630.shtml方便下次再访问哦。

·上一篇： 利用js对表格进行排序（包括数值、字符串、日期等数据类型）
·下一篇： 利用js检测浏览器类型及版本信息

利用JS实现表格隔行换色，鼠标经过时高亮显示

文章分类LIST >>返回首页

最新游戏

最新新闻