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事件和排他思想实现的效果。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 高效的表格行背景隔行变色及选定高亮的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) //判断是否当前

  • 原生JS操作网页给p元素添加onclick事件及表格隔行变色

    原生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.

  • 用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,"宋体";}

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

    本文实例讲述了javascript表格隔行变色加鼠标移入移出及点击效果的方法.分享给大家供大家参考.具体分析如下: 表格隔行变色,也是一个提高用户体验的js效果. 效果实现: 表格奇偶行的颜色不一样.这样可以防止用户看数据时串行. 鼠标移入某行时变颜色,移出再变回来.这样可以让用户清楚的知道自己正在看哪一行. 表格点击变色.便于用户选中自己想保留的项.   说明: i%2 每个数和2取模的值,只有0和1两种,这样就可以实现隔行变色的效果 tables_li[i].onoff = 1;  为了实现

  • 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-

  • 一个简单但常用的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实现鼠标经过表格行变色的方法

    本文实例讲述了js实现鼠标经过表格行变色的方法.分享给大家供大家参考.具体实现方法如下: <script type=text/javascript> <!-- (function(){ var rows = document.getElementById("listdata"); var add = function(){ this.style.backgroundColor="#f3f3f1"; }; var del = function(){

  • 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控制表格隔行变色

    <table width="800" border="0" cellpadding="0" cellspacing="0">    <tr>        <td>不变色</td>    </tr>    <tbody id="goaler">    <tr>        <td>xxxxxxxx</td

  • 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, //从

随机推荐