我們需要通過JS實現(xiàn)鼠標放到表格上整行變色，下面青島網(wǎng)站建設(shè)青華互聯(lián)就來介紹一下如何實現(xiàn)這個功能呢。
表格HTML代碼如下：
<table> <thead> <tr> <th></th> <th>班級類型</th> <th>開班時間</th> <th>開班狀態(tài)</th> </tr> </thead> <tbody id="tb"> <tr> <td> <input type="checkbox" /> </td> <td>基礎(chǔ)班</td> <td>2021-08-31</td> <td>報滿已開</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>基礎(chǔ)班</td> <td>2021-09-11</td> <td>報滿已開</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>高手班</td> <td>2021-08-05</td> <td>報滿已開</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>高手班</td> <td>2021-09-28</td> <td>報滿已開</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>高手班</td> <td>2021-11-11</td> <td>即將開班</td> </tr> </tbody></table>
功能實現(xiàn)思路：
1、事件委托，將mouseover事件綁定到tbody上，當鼠標移動到表格上時觸發(fā)
2、通過target事件對象找到父級元素tr，并改變其背景色
3、將mouseout事件綁定到tbody上，鼠標移出時觸發(fā)
下面通過代碼實現(xiàn)：
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>通過JS使表格懸浮變色|web前端高手班 http://web.itheima.com</title>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
text-align: center;
}
</style></head><body>
<table>
<thead>
<tr>
<th></th>
<th>班級類型</th>
<th>開班時間</th>
<th>開班狀態(tài)</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>基礎(chǔ)班</td>
<td>2021-08-31</td>
<td>報滿已開</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>基礎(chǔ)班</td>
<td>2021-09-11</td>
<td>報滿已開</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>高手班</td>
<td>2021-08-05</td>
<td>報滿已開</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>高手班</td>
<td>2021-09-28</td>
<td>報滿已開</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>高手班</td>
<td>2021-11-11</td>
<td>即將開班</td>
</tr>
</tbody>
</table></body>
<script>
// 1：需要為所有tr綁定懸浮事件，利用事件委托，只需要給父級綁定事件即可
// 2：找到父級元素，綁定事件
var tb = document.getElementById('tb');
tb.onmouseover = function(ev){
// 3：獲取事件對象，利用事件對象獲取target(具體觸發(fā)事件的元素)
// console.log(ev.target);
// 注意，觸發(fā)事件的是 td ，而我們需要讓tr改變背景顏色
// console.log(ev.target.parentElement)
ev.target.parentElement.style.background = '#f5f5f5'
}
tb.onmouseout = function(ev){
// 3：獲取事件對象，利用事件對象獲取target(具體觸發(fā)事件的元素)
// console.log(ev.target);
// 注意，觸發(fā)事件的是 td ，而我們需要讓tr改變背景顏色
// console.log(ev.target.parentElement)
ev.target.parentElement.style.background = ''
}
// 改變當前行的背景顏色</script></html>
我是有底線的
掃描二維碼手機查看該文章
文章引用：http://www.qingbaosc.com/news/webzhishi/1413.html
在線咨詢
電話咨詢
