<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.xiugai {
position: fixed;
top: 50%;
left: 50%;
border: 1px solid #aaaaaa;
width: 600px;
height: 300px;
margin-top: -150px;
margin-left: -300px;
padding: 10px;
z-index: 3;
}
.c2 {
position: fixed;
background: #777;
right: 0px;
left: 0px;
top: 0px;
bottom: 0px;
/* height:100%;
width:100%; */
z-index: 2;
}
.hide {
display: none;
}
</style>
</head>
<body>
<p>
<input type="button" value="添加">
<input type="button" value="全选">
<input type="button" value="取消">
<input type="button" value="反选">
</p>
<table border="1">
<thead>
<tr>
<td>选择</td>
<td>主机名</td>
<td>端口</td>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox">
</td>
<td>1.1.1.2</td>
<td>120</td>
<td>
<input type="button" value="修改">
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>1.1.1.3</td>
<td>130</td>
<td>
<input type="button" value="修改">
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>1.1.1.4</td>
<td>140</td>
<td>
<input type="button" value="修改">
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>1.1.1.5</td>
<td>150</td>
<td>
<input type="button" value="修改">
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>1.1.1.6</td>
<td>160</td>
<td>
<input type="button" value="修改">
</td>
</tr>
</tbody>
</table>
<div class ="xiugai hide">
<div>
<input type = "text">
</div>
<div>
<input type = "text">
</div>
<div>
<input type = "button" value="取消">
</div>
<div>
<input type = "button" value="确定">
</div>
</div>
<div class="c2 hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
$("p input[value = '全选']").click(function () {
$("table :checkbox").prop("checked", true);
})
$("p input[value = '取消']").click(function () {
// $("table :checkbox").prop("checked", false);
$("table :checkbox").each(function () {
this.checked = false;
})
})
$("input[value = '反选']").click(function () {
$("table :checkbox").each(function () {
if (this.checked == true) {
this.checked = false
}
else
this.checked = true;
})
})
$("input[value = '添加']").click(function () {
})
$("input[value = '修改']").click(function () {
$(".xiugai").removeClass("hide");
$(".c2").removeClass("hide");
var IPaddress = $(this).parent().siblings().eq(1).text();
var port = $(this).parent().siblings().eq(2).text();
$($(".xiugai input[type = 'text']")[0]).val(IPaddress);
$($(".xiugai input[type = 'text']")[1]).val(port);
// $(".xiugai input[type = 'text']").val(prot);
// console.log($(".xiugai input[type = 'text']")[0]);
// console.log($(".xiugai input[type = 'text']")[1]);//加数组后位dom对象 需要转化为jQuery对象
// console.log($(".xiugai input[type = 'text']"));
})
$(".xiugai input[value = '取消']").click(function () {
$(".xiugai").addClass("hide");
$(".c2").addClass("hide");
$(".xiugai input[type = 'text']").val("");
})
$(".xiugai input[value = '确定']").click(function () {
$(".xiugai").addClass("hide");
$(".c2").addClass("hide");
var currentIp = $($(".xiugai input[type = 'text']")[0]).text();
var currentPort = $($(".xiugai input[type = 'text']")[1]).text();
})
</script>
</body>
</html>
网友评论