<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.c1{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.4;
z-index: 9;
}
.c2{
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
z-index: 10;
margin-top: -200px;
margin-left: -250px
}
</style>
</head>
<body style="margin: 0">
<div>
<input type="button" value="添加" onclick="ShowModel();"/>
<input type="button" value="全选" onclick="ChooseAll();"/>
<input type="button" value="取消" onclick="CancleAll();"/>
<input type="button" value="反选" onclick="Reverse();"/>
<table>
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>端口</th>
<th>IP</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>hehe</td>
<td>90</td>
<td>10.192.17.20</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>haha</td>
<td>2375</td>
<td>10.192.17.21</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>gaga</td>
<td>6379</td>
<td>10.192.17.22</td>
</tr>
</tbody>
</table>
</div>
<!-- 遮罩层start-->
<div id="i1" class="c1 hide">
</div>
<!-- 遮罩层end-->
<!--弹出框-->
<div id="i2" class="c2 hide">
<p><input type="text"/></p>
<p><input type="text"/></p>
<p>
<input type="button" value="取消" onclick="HideModel();"/>
<input type="button" value="确定"/>
</p>
</div>
<!--弹出框-->
<script>
//弹框的显示和隐藏ShowModel、HideModel
function ShowModel(){
document.getElementById('i1').classList.remove('hide');
document.getElementById('i2').classList.remove('hide');
}
function HideModel(){
document.getElementById('i1').classList.add('hide');
document.getElementById('i2').classList.add('hide');
}
//全选
function ChooseAll() {
//获取所有的tr
var tbody = document.getElementById('tb');
var tr_list = tbody.children;
//循环所有的tr,current_tr
for (var i = 0; i < tr_list.length; i++) {
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
// 给checkbox设置为true就代表勾选，false就代表取消
checkbox.checked = true;
}
}
//取消全选
function CancleAll() {
//获取所有的tr
var tbody = document.getElementById('tb');
var tr_list = tbody.children;
//循环所有的tr,current_tr
for (var i = 0; i < tr_list.length; i++) {
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
// 给checkbox设置为true就代表勾选，false就代表取消
checkbox.checked = false;
}
}
//反选
function Reverse() {
//获取所有的tr
var tbody = document.getElementById('tb');
var tr_list = tbody.children;
//循环所有的tr,current_tr
for (var i = 0; i < tr_list.length; i++) {
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
// 给checkbox设置为true就代表勾选，false就代表取消
/*
第一种和第二种都可以都能实现反选
if (checkbox.checked){
checkbox.checked=false;
}
else
{
checkbox.checked=true;
}*/
checkbox.checked = ! checkbox.checked;
}
}
</script>
</body>
</html>
