html简单table、弹层实例
2018-08-23 本文已影响0人
奔跑的老少年
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*<!--默认弹层不显示-->*/
.hide{
display: none;
}
.s1{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: black;
opacity: 0.6;
z-index: 1;
}
.s2{
z-index: 2;
position: fixed;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
background-color: white;
}
</style>
</head>
<body>
<div>
<input type="button" value="添加" onclick="showModel();">
<input type="button" value="全选" onclick="chooseall();">
<input type="button" value="取消" onclick="cancelall();">
<input type="button" value="反选" onclick="reversall();"><br>
<table>
<thead>
<tr>选择 </tr>
<tr>主机名 </tr>
<tr>端口</tr>
</thead>
<tbody id="td">
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>9999</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.2</td>
<td>9989</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.3</td>
<td>9997</td>
</tr>
</tbody>
</table>
</div>
<!--第一个遮罩层-->
<div class="s1 hide" id="r1"></div>
<!--第二个输入框弹层-->
<div class="s2 hide" id="r2">
<input type="text"><br>
<input type="text"><br>
<input type="button" value="取消" onclick="hideModel();">
<input type="button" value="添加" >
</div>
<script>
function showModel() {
document.getElementById('r1').classList.remove('hide')
document.getElementById('r2').classList.remove('hide')
}
function hideModel() {
document.getElementById('r1').classList.add('hide')
document.getElementById('r2').classList.add('hide')
}
function chooseall() {
var tbody = document.getElementById('td');
var tr_list = tbody.children;
for (var i = 0;i<tr_list.length;i++){
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
checkbox.checked = true;
}
}
function cancelall() {
var tbody = document.getElementById('td');
var tr_list = tbody.children;
for (var i = 0;i<tr_list.length;i++){
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
checkbox.checked = false;
}
}
function reversall() {
var tbody = document.getElementById('td');
var tr_list = tbody.children;
for (var i = 0;i<tr_list.length;i++){
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
if (checkbox.checked == true){
checkbox.checked = false;
}else {
checkbox.checked = true;
}
}
}
</script>
</body>
</html>
