更新時(shí)間:2022年07月04日14時(shí)25分 來源:傳智教育 瀏覽次數(shù):
當(dāng)表格中的單元格比較多時(shí),可以在用戶鼠標(biāo)指針經(jīng)過時(shí)把當(dāng)前行添加背景色,使表格內(nèi)容顯得清晰和一目了然,容易閱讀。接下來我們使用鼠標(biāo)指針經(jīng)過事件onmouseoer和標(biāo)指針離開事件onmouseout 實(shí)現(xiàn)案例效果。
(1)編寫HTML頁面,示例代碼如下。
<body> <table> <thead> <tr> <th>代碼</th> <th>名稱</th> <th>最新公布凈值</th> <th>累計(jì)凈值</th> <th>前單位凈值</th> th>凈值增長率</th> </tr> </thead> <tbody> <tr> <td>0035**</td> <td>3個(gè)月定期開放債券</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)過時(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)過事件 onmouseover trs[i].onmouseover = function() { this.className = 'bg'; }; //4.鼠標(biāo)指針離開事件 onmouseout trs[i].onmouseout = function() { this.className = ‘’; }; } < /script>
北京校區(qū)