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

發(fā)布時間：2022-03-07 11:54:19 來源：億速云閱讀：208 作者：小新欄目：開發(fā)技術(shù)

這篇文章主要為大家展示了“JS如何實現(xiàn)表格隔行變色”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JS如何實現(xiàn)表格隔行變色”這篇文章吧。

具體內(nèi)容如下

用到的鼠標事件：（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>復(fù)選框</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>

顯示效果：

當鼠標滑過時：

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

當鼠標離開時：

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

當然這個效果使用 CSS的 :hover 可以非常簡單的實現(xiàn)（tbody tr:hover{background: #eee;}），但是在這個例子中主要想體現(xiàn)的是使用JS事件和排他思想實現(xiàn)的效果。

以上是“JS如何實現(xiàn)表格隔行變色”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽