溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“JS如何實現表格隔行變色”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“JS如何實現表格隔行變色”這篇文章吧。
具體內容如下
用到的鼠標事件：（1）鼠標經過 onmouseover；（2）鼠標離開 onmouseout
核心思路：鼠標經過 tr 行的時候，當前行會改變背景顏色，鼠標離開的時候去掉背景顏色。
注意：第一行（thead 里面的行）不需要變換顏色，改變的是 tbody 里面的行。
1、獲取元素，獲取的是 tbody里面的行。
2、循環注冊綁定事件，將 tbody 里面全部的行都得到，然后全部都注冊鼠標經過和離開事件。
3、所有行綁定鼠標經過事件，鼠標經過當前元素（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、利用循環注冊事件
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 可以非常簡單的實現（tbody tr:hover{background: #eee;}），但是在這個例子中主要想體現的是使用JS事件和排他思想實現的效果。
以上是“JS如何實現表格隔行變色”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
