首頁(yè)技術(shù)文章正文

【案例】鼠標(biāo)指針經(jīng)過(guò)時(shí)背景變色

更新時(shí)間:2022年07月04日14時(shí)25分來(lái)源:傳智教育瀏覽次數(shù):

　　當(dāng)表格中的單元格比較多時(shí)，可以在用戶鼠標(biāo)指針經(jīng)過(guò)時(shí)把當(dāng)前行添加背景色，使表格內(nèi)容顯得清晰和一目了然，容易閱讀。接下來(lái)我們使用鼠標(biāo)指針經(jīng)過(guò)事件onmouseoer和標(biāo)指針離開(kāi)事件onmouseout 實(shí)現(xiàn)案例效果。

　　(1)編寫(xiě)HTML頁(yè)面，示例代碼如下。

<body>
  <table>
   <thead>
     <tr>
       <th>代碼</th>
       <th>名稱(chēng)</th>
       <th>最新公布凈值</th>
       <th>累計(jì)凈值</th>
       <th>前單位凈值</th>
       th>凈值增長(zhǎng)率</th>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td>0035**</td>
        <td>3個(gè)月定期開(kāi)放債券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
     </tr>
       ...（此處省略多個(gè)tr）
    </tbody>
  </table>
</body>

　　(2)實(shí)現(xiàn)鼠標(biāo)指針經(jīng)過(guò)時(shí)背景變色的效果，具體代碼如下。

< script >
    //1.獲取元素
    var trs = document.querySelector('tbody').querySelectorAll('tr');
//2.利用循環(huán)綁定注冊(cè)事件
for (var i = 0; i < trs.length; i++) {
    // 3.鼠標(biāo)指針經(jīng)過(guò)事件 onmouseover
    trs[i].onmouseover = function() {
        this.className = 'bg';
    };
    //4.鼠標(biāo)指針離開(kāi)事件 onmouseout
    trs[i].onmouseout = function() {
        this.className = ‘’;
    };
} < /script>