纯JS代码实现隔行变色鼠标移入高亮

2019-11-19 18:52:07

字体：大中小

来源：转载

供稿：网友

在前端开发中经常见到隔行变色鼠标移入高亮显示的效果，下面小编给大家分享基于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>

以上所述是小编给大家介绍的纯JS代码实现隔行变色鼠标移入高亮，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：使用jquery实现的循环连续可停顿滚动实例

下一篇：jQuery实现ToolTip元素定位显示功能示例