隔行变色隐藏了,需要的可以解开.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格居中和每行变亮</title>
</head>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
position: absolute;
top: 42%;
left: 26%;
}
table
{
border-collapse: collapse;
text-align: center;
table-layout: fixed;
width: 700px;
}
table tbody {
background-color: whitesmoke;
}
table td, table th
{
border: 1px solid #cad9ea;
color: #666;
height: 30px;
}
.bg
{
background-color: tomato;
}
.change{
background-color: whitesmoke;
}
</style>
<body>
<div>
<table>
<thead>
<th>这</th>
<th>是</th>
<th>表</th>
<th>头</th>
<th>呀</th>
<th>!</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var tbs = document.querySelector('tbody').querySelectorAll('tr')
//鼠标经过变色
for(var i = 0;i<tbs.length;i++){
tbs[i].onmouseover = function(){
console.log("ass")
this.className = 'bg';
}
tbs[i].onmouseout = function(){
this.className = 'change'
}
}
//隔行变色
// function fun(){
// for (var j = 0; j < tbs.length; j++) {
// tbs[j].style.backgroundColor = 'aqua'
// j++;
// }
// }
// window.οnlοad=fun;
</script>
</html>
前端学习中…