JS實現(xiàn)表格隔行變色

更新時間：2022年03月07日 10:25:07 作者：Cloud%

這篇文章主要為大家詳細介紹了JS實現(xiàn)表格隔行變色，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)表格隔行變色的具體代碼，供大家參考，具體內容如下

用到的鼠標事件：（1）鼠標經(jīng)過 onmouseover；（2）鼠標離開 onmouseout

核心思路：鼠標經(jīng)過 tr 行的時候，當前行會改變背景顏色，鼠標離開的時候去掉背景顏色。

注意：第一行（thead 里面的行）不需要變換顏色，改變的是 tbody 里面的行。

1、獲取元素，獲取的是 tbody里面的行。

2、循環(huán)注冊綁定事件，將 tbody 里面全部的行都得到，然后全部都注冊鼠標經(jīng)過和離開事件。

3、所有行綁定鼠標經(jīng)過事件，鼠標經(jīng)過當前元素（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、利用循環(huán)注冊事件
? ? 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>

顯示效果：

當鼠標滑過時：