主要用到，$('#i1').each(),标签里绑定函数可传参数this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.zhezhao{
z-index: 99;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: black;
opacity: 0.6;
}
.motai{
width: 500px;
height: 300px;
position: fixed;
background-color: white;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -150px;
z-index: 100; }
</style>
</head>
<body>
<div class="zhezhao hide"></div>
<div class="motai hide">
<table id="tb2" border="1">
<thead><tr><th>IP</th><th>端口</th><th>操作</th></tr></thead>
<tr><td><input target="ip" type="text" value=""></td><td><input target="port" type="text" value=""></td><td><a id="submit">确定</a>|<a id="cancel">取消</a></td></tr>
</table>
</div>
<div style="margin: 0 auto;width: 500px;height: 800px;">
<input type="button" value="添加" onclick="addTr();"/>
<table id="tb1" border="1">
<thead>
<tr><th>选择</th><th>IP</th><th>端口</th><th>操作</th></tr>
</thead>
<tbody>
<tr><td target="checkbox"><input type="checkbox"/></td><td target="ip">1.1.1.1</td><td target="port">80</td><td><a target="modify" onclick="modifyTr(this)">编辑</a>|<a target="del" onclick="delTr(this)">删除</a></td></tr>
<tr><td target="checkbox"><input type="checkbox"/></td><td target="ip">1.1.1.2</td><td target="port">81</td><td><a target="modify" onclick="modifyTr(this)">编辑</a>|<a target="del" onclick="delTr(this)">删除</a></td></tr>
<tr><td target="checkbox"><input type="checkbox"/></td><td target="ip">1.1.1.3</td><td target="port">82</td><td><a target="modify" onclick="modifyTr(this)">编辑</a>|<a target="del" onclick="delTr(this)">删除</a></td></tr>
<tr><td target="checkbox"><input type="checkbox"/></td><td target="ip">1.1.1.4</td><td target="port">83</td><td><a target="modify" onclick="modifyTr(this)">编辑</a>|<a target="del" onclick="delTr(this)">删除</a></td></tr>
</tbody>
</table>
</div>
<script src="jquery-3.3.1.js"></script>
<script> function addTr() {
$('.zhezhao,.motai').removeClass('hide');
index = -1; //标签为空时，模态框提交是新增
} function modifyTr(self) {
$('.zhezhao,.motai').removeClass('hide');
var tds = $(self).parent().prevAll();
index = $(self).parent().parent().index(); //记录当前索引，方便修改后提交调用
tds.each(function () {
var target = $(this).attr('target');
var value = $(this).text();
console.log(target,value);
$('#tb2 input[target="'+target+'"]').val(value);
}); // 以上函数，实现按表格列数里的属性target来对应弹出的模态框表格target,依次到tds里的值去填tb2上对应的框
} function delTr(self) {
$(self).parent().parent().remove();
} $('#tb2 #submit').click(function () {
var ip = $('#tb2 input[target="ip"]').val();
var port = $('#tb2 input[target="port"]').val();
if(index != -1){
$('#tb1 td[target="ip"]').eq(index).text(ip);
$('#tb1 td[target="port"]').eq(index).text(port);
}else {
var tag = '<tr><td target="checkbox"><input type="checkbox"/></td><td target="ip">'+ip+'</td><td target="port">'+port+'</td><td><a target="modify" onclick="modifyTr(this)">编辑</a>|<a target="del" onclick="delTr(this)">删除</a></td></tr>'
$('#tb1 tbody').append(tag);
}
$('.motai,.zhezhao').addClass('hide');
}); $('#tb2 #cancel').click(function () {
$('.zhezhao').addClass('hide');
$('.motai').addClass('hide');
}); </script>
</body>
</html>