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>顯示效果：
當鼠標滑過時：
當鼠標離開時：
當然這個效果使用 CSS的 :hover 可以非常簡單的實現(xiàn)（tbody tr:hover{background: #eee;}），但是在這個例子中主要想體現(xiàn)的是使用JS事件和排他思想實現(xiàn)的效果。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本篇文章主要是對js 動態(tài)加載事件的幾種方法進行了詳細的總結介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要帶領大家理解JavaScript表單的基礎知識，對javascript表單腳本進行深入學習，感興趣的小伙伴們可以參考一下2016-01-01
之前項目使用騰訊地圖，不利于開發(fā)者查找，這篇文章主要介紹了vue 集成騰訊地圖實現(xiàn)api，具有一定的參考價值，感興趣的可以了解下2021-07-07
下面小編就為大家?guī)硪黄狫S動態(tài)給對象添加屬性和值的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
CSS33D炫酷左右滑動開關按鈕是一款非?？岬腃SS3 3D開關按鈕，點擊按鈕可以左右滑動，就像開關打開閉合一樣的效果，通過本篇文章給大家介紹純CSS3代碼實現(xiàn)滑動開關效果，需要的朋友可以參考下2015-08-08
這篇文章主要介紹了JS運動特效之任意值添加運動的方法,結合實例形式分析了javascript針對多物體運動通過參數(shù)控制不同運動效果的實現(xiàn)方法,需要的朋友可以參考下2018-01-01
javascript語言是網(wǎng)頁中廣泛使用的一種腳本語言，通過本文給大家介紹javascript基本語法，需要的朋友可以參考下本文2016-01-01
console對象是JavaScript的原生對象，它有點像Unix系統(tǒng)的標準輸出stdout和標準錯誤stderr，可以輸出各種信息用來調試程序，而且還提供了很多額外的方法，供開發(fā)者調用。它的常見用途有兩個。顯示網(wǎng)頁代碼運行時的錯誤信息。提供了一個命令行接口，用來與網(wǎng)頁代碼互動。2016-08-08
這篇文章主要介紹了JS模擬的Map類實現(xiàn)方法,可實現(xiàn)模擬java中map屬性按照鍵值對保存的功能,提供了采用數(shù)組和json兩種實現(xiàn)方式,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了詳解JavaScript之Array.reduce源碼解讀，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11