脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS表格隔行变色

JS实现表格隔行变色

 更新时间：2022年03月07日 10:25:07   作者：Cloud%  
这篇文章主要为大家详细介绍了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事件和排他思想实现的效果。

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

您可能感兴趣的文章:

相关文章

最新评论