首页 > 代码库 > JS实现隔行变色，鼠标移入高亮

JS实现隔行变色，鼠标移入高亮

2024-08-22 15:03:19   222人阅读

<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; min-height: 36.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #d74200 } p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #289c97 } p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #060606 } p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4a8a01 } p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4f5d66 } p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #a5b2b9 } p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #698906 } span.s1 { color: #4f5d66 } span.s2 { color: #2b7ec3 } span.s3 { color: #48565d } span.s4 { color: #289c97 } span.s5 { color: #d74200 } span.s6 { color: #000000 } span.s7 { color: #060606 } span.s8 { color: #929151 } span.s9 { color: #4a8a01 } span.s10 { color: #ad42ef } span.s11 { color: #698906 } span.s12 { color: #d16400 } span.s13 { color: #4663cc } span.s14 { color: #e48b00 } span.Apple-tab-span { white-space: pre }</style>

<!DOCTYPE html>

<html>

 

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#table {

width: 400px;

border-collapse: collapse;

}

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

JS实现隔行变色，鼠标移入高亮


联系
我们