纯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>