表格的选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.single{
background-color: rgb(76, 231, 172);
font-size: 17px;
color: white;
}
.double{
background-color: rgb(17, 230, 148);
font-size: 17px;
color: white;
}
.highLight{
background-color: rgb(13, 241, 192);
font-size: 20px;
color: white;
}
table{
box-sizing: border-box;
}
</style>
</head>
<body>
<table width="300" border="1" id="mytable">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>户籍</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>河南</td>
</tr>
<tr>
<td>张四</td>
<td>19</td>
<td>河北</td>
</tr>
<tr>
<td>张五</td>
<td>20</td>
<td>湖南</td>
</tr>
</table>
<script>
var name;
var table = document.getElementById("mytable");
var rows = table.rows;
for(var i=1;i<rows.length;i++)
{
if(i%2 == 0)
{
rows[i].className = "single";
}
else
{
rows[i].className = "double";
}
rows[i].onmouseover = function(){
name = this.className;
this.className = "highLight";
}
rows[i].onmouseout = function(){
this.className = name;
}
}
</script>
</body>
</html>