<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.showdon{
position: fixed;
left: 0;
top:0;
right: 0;
bottom:0;
background-color: chocolate;
opacity:0.6;
z-index: 9;
}
.modal{
position: fixed;
top: 50%;
left: 50%;
500px;
height: 400px;
margin-left: -250px;
margin-top: -250px;
background-color:white;
z-index: 10;
}
.floatdown{
clear: both;
}
.floatleft{
float: left;
100px;
text-align: right;
padding-right: 10px;
}
.floatright{
float: left;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="showdon"></div>
<div class="modal">
<div ><div class="floatleft">hostname:</div><div class="floatright"><input name="hostname" type="text" /></div>
<div class="floatdown"></div></div>
<div ><div class="floatleft">port:</div><div class="floatright"><input name="port" type="text" /></div>
<div class="floatdown"></div></div>
<div><input type="button" value="确认" /> <input type="button" value="取消" onclick="exitmain()"></div>
</div>
<div>
<div>
<table class="tb1" border="1px">
<thead>
<tr>
<th><input type="checkbox" onclick="selectALL()"></th>
<th tname="hostname">IP地址</th>
<th tname="port">端口</th>
<th tname="operator">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="td1" type="checkbox" ></td>
<td tname="hostname">192.168.31.1</td>
<td tname="port">80</td>
<td tname="operator"><a class="edit">编辑</a>|<a>删除</a></td>
</tr>
<tr>
<td><input class="td1" type="checkbox" ></td>
<td tname="hostname">192.168.31.2</td>
<td tname="port">804</td>
<td tname="operator"><a class="edit">编辑</a>|<a>删除</a></td>
</tr>
<tr>
<td><input class="td1" type="checkbox" ></td>
<td tname="hostname">192.168.31.3</td>
<td tname="port">803</td>
<td tname="operator"><a class="edit">编辑</a>|<a>删除</a></td>
</tr>
<tr>
<td><input class="td1" type="checkbox" ></td>
<td tname="hostname">192.168.31.4</td>
<td tname="port">802</td>
<td tname="operator"><a class="edit">编辑</a>|<a>删除</a></td>
</tr>
<tr>
<td><input class="td1" type="checkbox" ></td>
<td tname="hostname">192.168.31.5</td>
<td tname="port">801</td>
<td tname="operator"><a class="edit">编辑</a>|<a>删除</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="jquery-1.11.3.js"></script>
<script>
function selectALL() {
$('.tb1 tbody :checkbox').each(function () {
$(this).prop('checked')? $(this).prop('checked',false):$(this).prop('checked',true);
})
}
function exitmain() { //取消隐藏图层
$('.modal,.showdon').toggleClass('hide') //class开关，toggleClass
}
$('.edit').click(function () {
exitmain();
var v = $(this).parent().prevAll(); //查询父亲层上面所有
v.each(function () {
var t_name = $(this).attr('tname'); //查出tname的值
var t_value = $(this).text() //查出text值
console.log('.floatright input[name="' + t_name + '"]')
$('.floatright input[name="' + t_name + '"]').val(t_value); //字符串拼接，通过对应的属性名 把值赋value
}
)
})
</script>
</body>
</html>