<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{display:none;}
.mask{
position:fixed;
right:0;
left:0;
top:0;
bottom:0;
z-index:9;
opacity:0.6;
background-color:black;
}
.modal{
position:fixed;
width:500px;
height:400px;
left:50%;
top:50%;
z-index:10;
opacity:0.5;
margin-left:-250px;
margin-top:-250px;
background-color:black;
}
.te{margin-top:150px;margin-left:150px}
</style>
</head>
<body>
<div class="mask hide"></div>
<div class="modal hide">
<div class="te">
<input type="text" name="hostname">
<input type="text" name="port">
</div>
<div>
<input type="button" value="取消" onclick="cancelModal()">
</div>
</div>
<div>
<table border="1px">
<thead>
<th>Ip</th>
<th>端口号</th>
<th>操作</th>
</thead>
<tbody>
<tr>
<td>1.1.1.1</td>
<td>80</td>
<td>
<a class="edit">编辑</a>|<a>删除</a>
</td>
</tr>
<tr>
<td>1.1.1.2</td>
<td>80</td>
<td>
<a class="edit">编辑</a>|<a>删除</a>
</td>
</tr>
<tr>
<td>1.1.1.3</td>
<td>80</td>
<td>
<a class="edit">编辑</a>|<a>删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
//绑定事件
$(".edit").click(function(){
$(".mask,.modal").removeClass("hide");//删除标签中的hide属性
var tds = $(this).parent().prevAll();
//在这里拿到的tds是个Dom对象；需要转化成jquery对象
var host =$(tds[1]).text();//获取标签文本
var port = $(tds[0]).text();//获取标签文本
$(".te input[name='hostname']").val(host);//获取文本框内容；并给文本框重新赋值
$(".te input[name='port']").val(port);//获取文本框并给文本框重新赋值
})
function cancelModal(){
$(".mask,.modal").addClass("hide");
$(".te input[name='hostname']").val("");
$(".te input[name='port']").val("");
}
</script>
