純JS代碼實現隔行變色鼠標移入高亮

時間 2019-11-13

標籤代碼實現隔行變色鼠標移入欄目 JavaScript 简体版

原文原文鏈接

在前端開發中常常見到隔行變色鼠標移入高亮顯示的效果，下面小編給你們分享基於js代碼實現的隔行變色鼠標移入高亮效果，廢話很少說了，具體代碼以下所示：javascript

<!DOCTYPE html>css

<html>html

<head>前端

<meta charset="UTF-8">java

<title></title>this

<style type="text/css">code

#table {htm

width: 400px;seo

border-collapse: collapse;ip

}

</style>

</head>

<body>

<table id="table" border="1">

<thead>

<td>ID</td>

<td>姓名</td>

<td>年齡</td>

</thead>

<tbody>

<tr>

<td>1</td>

<td>黃藝</td>

<td>20</td>

</tr>

<tr>

<td>2</td>

<td>張三</td>

<td>21</td>

</tr>

<tr>

<td>3</td>

<td>李四</td>

<td>22</td>

</tr>

<tr>

<td>4</td>

<td>網無</td>

<td>23</td>

</tr>

</tbody>

</table>

</body>

<script type="text/javascript">

// 實現隔行變色，鼠標移入高亮

var table = document.getElementById("table");

var oldColor = "";//聲明一個變量，保存表格原來的顏色

for(var i = 0; i < table.tBodies[0].rows.length; i++) {

//使用判斷實現隔行變色

if(i % 2 == 0) {

table.tBodies[0].rows[i].style.backgroundColor = "gray";

} else {

table.tBodies[0].rows[i].style.backgroundColor = "#ccc";

}

//實現鼠標移入高亮

table.tBodies[0].rows[i].onmouseover = function() {

oldColor = this.style.backgroundColor;

this.style.backgroundColor = "red";

}

//實現鼠標移出變回原來的顏色

table.tBodies[0].rows[i].onmouseout = function() {

this.style.backgroundColor = oldColor;

}

</script>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。