<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<style>
.hide {
display: none;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: 400px;
margin-left: -250px;
margin-top: -250px;
background-color: #eeeeee;
z-index: 10;
}
.shadow {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.6;
background-color: black;
z-index: 9;
}
</style>
</head>
<body>
<a onclick="add();">添加</a>
<table border="1" id=‘ta‘>
<tr>
<td id="tt" target="hostname">1.1.1.11</td>
<td target="port">80</td>
<td>
<a class="edit">编辑</a> | <a class="del_model">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.12</td>
<td target="port">80</td>
<td>
<a class="edit">编辑</a> | <a class="del_model">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.13</td>
<td target="port">80</td>
<td>
<a class="edit">编辑</a> | <a class="del_model">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.14</td>
<td target="port">80</td>
<td>
<a class="edit">编辑</a> | <a class="del_model">删除</a>
</td>
</tr>
</table>
<div class="modal hide">
<div>
<input name="hostname" type="text"/>
<input name="port" type="text"/>
</div>
<div>
<input type="button" value="取消" onclick="cancel();"/>
<input id="confirm" type="button" value="确定" />
</div>
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
function add() {
$(".modal,.shadow").removeClass(‘hide‘)
}
function cancel() {
$(".modal,.shadow").addClass(‘hide‘)
$(‘.modal input[type="text"]‘).val("")
// 点击取消按钮就会清空文本框的内容
}
$(".edit").click(function () {
$(‘.modal,.shadow‘).removeClass(‘hide‘)
var res = $(this).parent().prevAll()
// 循环每一个td
res.each(function () {
// 获取hostname属性
var host_name = $(this).attr(‘target‘);
// 获取内容1.1.1.11
var res = $(this).text();
// $(‘.modal input[name="hostname"]‘)
// 字符串拼接
var a = ‘.modal input[name="‘;
var b = ‘"]‘
var tmp = a + host_name + b
$(tmp).val(res)
})
// .val()进行赋值
})
$(‘.del_model‘).click(function () {
$(this).parent().parent().remove();
})
function confirm_model() {
var tr = document.createElement(‘tr‘);
var td1 = document.createElement(‘td‘);
td1.innerHTML=‘1.1.1.1‘;
var td2 = document.createElement(‘td‘);
td2.innerHTML=‘8001‘;
$(tr).append(td1);
$(tr).append(td2);
$(‘#ta‘).append(tr);
$(".modal,.shadow").addClass(‘hide‘);
}
</script>
</body>
</html>
时间： 2024-10-20 21:42:25