纯JS代码实现隔行变色鼠标移入高亮
纯JS代码实现隔行变色鼠标移入高亮
码农般的学良 发表于1年前
纯JS代码实现隔行变色鼠标移入高亮
  • 发表于 1年前
  • 阅读 72
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

在前端开发中经常见到隔行变色鼠标移入高亮显示的效果,下面小编给大家分享基于js代码实现的隔行变色鼠标移入高亮效果,废话不多说了,具体代码如下所示:

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

共有 人打赏支持
粉丝 2
博文 20
码字总数 23265
×
码农般的学良
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: