标签：表格 i1 firstElementChild js getElementById add 004 trs document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格操作</title>
<style>
.add{
width: 500px;
height: 300px;
border: 1px solid red;
z-index: 9;
position: fixed;
top: 300px;
right: 50%;
margin-right: -250px;
background-color: #9a9a9a;
}
.hide{
display: none;
}
.mask{
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
background-color: black;
opacity: 0.7;
z-index: 8;
}
</style>
</head>
<body style="width: 980px;margin: 0 auto">
<div id="i1">
<input type="button" value="添加" onclick="add_item()"/>
<input type="button" value="全选" onclick="choose_box_all()"/>
<input type="button" value="反选" onclick="choose_box_reverse()"/>
<input type="button" value="取消" onclick="cancel_box_all()"/>
</div>
<table border="10" style="margin-top: 10px">
<thead>
<tr>
<th>选择</th>
<th>IP</th>
<th>端口</th>
</tr>
</thead>
<tbody id="table_i1">
<tr>
<td><input type="checkbox"/></td>
<td>1.1.1.0</td>
<td>8888</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>1.1.1.7</td>
<td>6666</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>13.31.13.7</td>
<td>6677</td>
</tr>
</tbody>
</table>
<div id="add_i1" class="add hide" style="">
I P:<input type="text"/><br>
端 口:<input type="text"/><br>
<div>
<input type="button" value="确定"/>
<input type="button" value="取消" onclick="cancel_item()"/>
</div>
</div>
<div id="mask_i1" class="mask hide"></div>
<script>
function add_item(){
document.getElementById('add_i1').classList.remove('hide');
document.getElementById('mask_i1').classList.remove('hide');
}
function cancel_item(){
document.getElementById('add_i1').classList.add('hide');
document.getElementById('mask_i1').classList.add('hide');
}
function choose_box_all(){
var trs = document.getElementById('table_i1').children;
for(var i=0;i<trs.length;i++){
trs[i].firstElementChild.firstElementChild.checked = true;
}
}
function cancel_box_all(){
var trs = document.getElementById('table_i1').children;
for(var i=0;i<trs.length;i++){
trs[i].firstElementChild.firstElementChild.checked = false;
}
}
function choose_box_reverse(){
var trs = document.getElementById('table_i1').children;
for(var i=0;i<trs.length;i++){
if(trs[i].firstElementChild.firstElementChild.checked){
trs[i].firstElementChild.firstElementChild.checked = false;
}else{
trs[i].firstElementChild.firstElementChild.checked = true;
}
}
}
</script>
</body>
</html>
标签：表格,
i1,
firstElementChild,
js,
getElementById,
add,
004,
trs,
document
From： https://www.cnblogs.com/lfyxys/p/16911905.html