作业要求：
效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>作业2-全选</title>
<script src="utility.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
border: 0px solid black;
}
ul li{
width: 80px;
display: inline-block;
border: 1px solid #000000;
text-align: center;
}
ul li:first-child{
width: 70px;
}
ul li:nth-child(2){
width: 155px;
}
ul li:nth-child(3),ul li:nth-child(4){
width: 75px;
}
#t1,td{
border: 1px solid #000;
width: 400px;
border-collapse: separate;
text-align: center;
}
input[type='button']{
width: 110px;
height: 50px;
margin: 5px 130px;
border: 1px solid;
}
</style>
</head>
<body>
<div id="b-box">
<!-- 去除无序列表的点 -->
<ul style="list-style: none;">
<li><input type="checkbox" name="" id="checkAll" value="" onclick="checkAll()">全选</input></li>
<li>学号</li>
<li>姓名</li>
<li>性别</li>
</ul>
<table id="t1">
<tr>
<td><input type="checkbox" name="" value="" class="check"></input></td>
<td>2018334103</td>
<td>陈宸</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox" name="" value="" class="check"></input></td>
<td>2018334103</td>
<td>陈宸</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox" name="" value="" class="check"></input></td>
<td>2018334103</td>
<td>陈宸</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox" name="" value="" class="check"></input></td>
<td>2018334103</td>
<td>陈宸</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox" name="" value="" class="check"></input></td>
<td>2018334103</td>
<td>陈宸</td>
<td>男</td>
</tr>
</table>
<input type="button" name="" id="" value="雪藏" onclick="dis()"/>
<script type="text/javascript">
function checkAll(){
var check = document.getElementsByClassName("check");
for(var i = 0;i < check.length; ++i){
if(check[i].type == "checkbox"){
check[i].checked = $("checkAll").checked;
}
}
}
function dis(){
if(document.querySelector("[type = 'button']").value == '雪藏'){
$("t1").style.color = "#fff"
document.querySelector("[type = 'button']").value = '显示';
}
else{
$("t1").style.color = "#000"
document.querySelector("[type = 'button']").value = "雪藏";
}
}
</script>
</div>
</body>
</html>
其中用到的utility.js文件：
function $(id){
return document.getElementById(id);
}
function l(a){
console.log(a);
}
注意：
1、去除无序列表li前面的点：
<ul style=“list-style: none;”>
