<!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>