javascript - JS鼠标移动换色表格行变色
本文介绍了javascript - JS鼠标移动换色表格行变色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
点击按钮控制表格是否开启鼠标经过隔行换色，代码如下：
<!DOCTYPE html>
<html lang="cmn-hans">
<head>
<meta charset="utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta name=renderer content=webkit>
<!-- some meta tags, important for SEO"-->
<meta name="description" content="put a short description in here" />
<meta name="keywords" content="put your important keywords in here" />
<title>1.表格应用：隔行变色、移入变色-Javascript005-表格应用、提取、添加、删除
</title>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script type="text/javascript">
window.onload = function() {
var table = document.getElementsByTagName('table')[0];
var btn = document.getElementsByTagName('button');
btn[0].onclick = function() { //老方法提取内容
var lisi = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML;
alert(lisi);
};
btn[1].onclick = function() { //新方法提取内容
//tBodies 集合返回表格 <tbody> 元素的集合。
//rows 集合返回表格中所有行（TableRow 对象）的一个数组，即一个 HTMLCollection。该集合包括 <thead>、<tfoot> 和 <tbody> 中定义的所有行。
//cells 集合返回表格中所有 <td> 或 <th> 元素。
var zhangsan = table.tBodies[0].rows[0].cells[1].innerHTML;
alert(zhangsan);
};
btn[2].onclick = function() { //开启关闭隔行变色
if (btn[2].innerHTML == '开启隔行变色') {
table.setAttribute('class', 'table table-bordered table-striped');
btn[2].style.background = 'red';
btn[2].innerHTML = '关闭隔行变色';
} else {
table.setAttribute('class', 'table table-bordered');
btn[2].style.background = '#5bc0de';
btn[2].innerHTML = '开启隔行变色';
}
};
btn[3].onclick = function() { //开启关闭移入变色
if (btn[3].innerHTML == '开启移入变色') {
btn[3].style.background = 'red';
btn[3].innerHTML = '关闭移入变色';
for (var i = 0; i < table.tBodies[0].rows.length; i++) {
table.tBodies[0].rows[i].onmouseover=function(){
this.style.background='yellow';
};
table.tBodies[0].rows[i].onmouseout=function(){
this.style.background='';
}
}
} else if(btn[3].innerHTML == '关闭移入变色'){
btn[3].style.background = '#5bc0de';
btn[3].innerHTML = '开启移入变色';
}
}
}
</script>
</head>
<body>
<p>表格应用：隔行变色、移入变色</p>
<p>
<button type="button" class="btn btn-info">老方法提取李四单元格</button>
<button type="button" class="btn btn-info">新方法提取张三单元格</button>
<button type="button" class="btn btn-info">开启隔行变色</button>
<button type="button" class="btn btn-info">开启移入变色</button>
</p>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>33</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>44</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>55</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>66</td>
</tr>
<tr>
<td>5</td>
<td>homejoy</td>
<td>33</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>为什么，我的代码点击关闭之后，依然是鼠标经过可以变色？
解决方案
你没有将 onmouseover onmouseout 事件清除
} else if(btn[3].innerHTML == '关闭移入变色'){
btn[3].style.background = '#5bc0de';
btn[3].innerHTML = '开启移入变色';
for (var i = 0; i < table.tBodies[0].rows.length; i++) {
table.tBodies[0].rows[i].onmouseover=undefined;
table.tBodies[0].rows[i].onmouseout=undefined;
}
}这样就可以了
这篇关于javascript - JS鼠标移动换色表格行变色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
