<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js实现表格鼠标经过行变色</title>
</head>
<body>
<table>
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
</thead>
<tbody>
<tr>
<td>zhangsan</td>
<td>34</td>
<td>men</td>
</tr>
<tr>
<td>zhangsan</td>
<td>34</td>
<td>men</td>
</tr>
<tr>
<td>zhangsan</td>
<td>34</td>
<td>men</td>
</tr>
<tr>
<td>zhangsan</td>
<td>34</td>
<td>men</td>
</tr>
</tbody>
</table>
<style>
.bg{
background-color: blueviolet;
}
</style>
<script>
var trs = document.querySelector('tbody').querySelectorAll('tr');
for(var i = 0; i < trs.length; i++){
trs[i].onmouseover = function(){
this.className='bg';
}
trs[i].onmouseout = function(){
this.className='';
}
}
</script>
</body>
</html>