<!DOCTYPE html>
<html lange="en"> <!-- 设置语音 -->
<head>
<meta charset="UFT-8"> <!-- 设置编码格式 -->
<title>Title</title>
<style>
.hide{
display:none; /*none隐藏*/
}
.base{
position:fixed; /*固定位置*/
left:0;
top:0;
right:0;
bottom:0;
background-color:black;
opacity:0.5; /*透明度*/
z-index:9;
}
.top{
width:500px;
height:400px;
background-color:white;
position:fixed;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-200px;
z-index:10;
}
</style>
</head>
<body style="margin:0;">
<div>
<table>
<thead> <!--头部 -->
<tr> <!--行 -->
<th>选择</th>
<th>主机名</th>
<th>端口</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>192.168.0.1</td>
<td>8700</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>192.168.0.2</td>
<td>8800</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>192.168.0.3</td>
<td>8900</td>
</tr>
</tbody>
</table>
<input type="button" value="添加" οnclick="ShowModel();"/>
<input type="button" value="全选" οnclick="ChooseAll();"/>
<input type="button" value="取消" οnclick="CancleAll();"/>
<input type="button" value="反选" οnclick="ReverseAll();"/>
</div>
<!-- 遮罩层 -->
<div id='i1' class="top hide"></div>
<!-- 弹出框 -->
<div id='i2' class="base hide">
<p> <input type="text"/> IP</p>
<p> <input type="text"/> port</p>
<p>
<input type="button" value="撤销" οnclick="HideModel();"/>
<input type="button" value="提交"/>
</p>
</div>
<script>
function ShowModel(){
document.getElementById('i1').classList.remove('hide'); //根据id获取标签 classList 移除hide属性
document.getElementById('i2').classList.remove('hide');
}
function HideModel(){
document.getElementById('i1').classList.add('hide');
document.getElementById('i1').classList.add('hide');
}
function ChooseAll(){
var tbody = document.getElementById('tb');
var tr_list = tbody.children; //获取子标签列表
for(var i = 0; i < tr_list.length; i++) //循环列表
{
var current = tr_list[i];
var checkbox = current.children[0].children[0]; //获取子标签中的复选框
checkbox.checked = true; //复选框打勾
}
}
function CancleAll(){
var tbody = document.getElementById('tb');
var tr_list = tbody.children; //获取子标签列表
for(var i = 0; i < tr_list.length; i++) //循环列表
{
var current = tr_list[i];
var checkbox = current.children[0].children[0]; //获取子标签中的复选框
checkbox.checked = false; //取消打勾
}
}
function ReverseAll(){
var tbody = document.getElementById('tb');
var tr_list = tbody.children; //获取子标签列表
for(var i = 0; i < tr_list.length; i++) //循环列表
{
var current = tr_list[i];
var checkbox = current.children[0].children[0]; //获取子标签中的复选框
if(checkbox.checked){
checkbox.checked = false;
}else{
checkbox.checked = true;
}
}
}
function ChangeMenu(nid){
var current_header = document.getElementById(nid);
var item_list = current_header.parentElement.parentElement.children; //获取当前标签的符标签的符标签的所有子标签
for(var i=0;i<item_list.length;i++){
var current_item = item_list[i];
current_item.children[1].classList.add('hide');
}
current_header.nextElementSibling.classList.remove('hide'); //通过当前标签父标签下所有的子标签
}
</script>
</body>
</html>
