<!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>
table {
border-collapse: collapse;/*属性设置表格的边框是否被折叠成一个单一的边框或隔开： 加上它跟真正的表格无异 去掉，则是标准显示*/
width:100%; /*宽度占浏览器的100%*/
}
table th{
background-color: blue;
}
table, td, th {
padding: 10; /*如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性*/
border: 1px solid black; /*表示1像素的黑色黑线边框*/
text-align:right; /*针对文字，水平方向的右靠齐，可以改为left左，center中间*/
height:50px; /*行高*/
vertical-align:bottom; /*针对文字，默认显示垂直方向的居中，可以更改为top顶部，bottom底部*/
/* background-color:green; 背景颜色 */
color:#000; /*文字颜色*/
text-align: center;
line-height: 50px;
}
.bg{
background-color: pink;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th><input type="checkbox" class="allcheck"></th>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单元净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" ></td>
<td>003527</td>
<td>3个月定期</td>
<td>1.075</td>
<td>1.079</td>
<td>1.0722</td>
<td>+0.047%</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>003527</td>
<td>3个月定期</td>
<td>1.075</td>
<td>1.079</td>
<td>1.0722</td>
<td>+0.047%</td>
</tr>
<tr>
<td><input type="checkbox" ></td>
<td>003527</td>
<td>3个月定期</td>
<td>1.075</td>
<td>1.079</td>
<td>1.0722</td>
<td>+0.047%</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>003527</td>
<td>3个月定期</td>
<td>1.075</td>
<td>1.079</td>
<td>1.0722</td>
<td>+0.047%</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>003527</td>
<td>3个月定期</td>
<td>1.075</td>
<td>1.079</td>
<td>1.0722</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
<script>
// 获取元素
var allcheck = document.querySelector('.allcheck');
var trs= document.getElementsByTagName('tr');
var trinput = document.querySelector('tbody').querySelectorAll('input');
for(var i=0;i<trs.length;i++){
trs[i].onmouseover = function(){
this.className='bg';
}
trs[i].onmouseout = function(){
this.className='';
}
}
// 单击全选框，全选单选框
// 思路被选中了以后返回布尔值true console.log(this.checked);
allcheck.onclick = function(){
for(var j=0;j<trinput.length;j++){
trinput[j].checked=this.checked;
}
}
// 全选单选框，全选框自动勾选
for(var k=0;k<trinput.length;k++ ){
trinput[k].onclick = function(){
var flg = true;
for(var i=0;i<trinput.length;i++){
//trinput[i].checked 返回的是状态，true是被选中的，反之false
if(!trinput[i].checked){ //if当true的会执行，取反；就是当时false状态，赋值给flg
flg=false;
}
}
allcheck.checked=flg;
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号