1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .modal{ 11 position: fixed; 12 top: 50%; 13 left: 50%; 14 width: 500px; 15 height: 400px; 16 margin-left: -250px; 17 margin-top: -250px; 18 background-color: #eeeeee; 19 z-index: 10; 20 } 21 .shadow{ 22 position: fixed; 23 top: 0; 24 left: 0; 25 right: 0; 26 bottom: 0; 27 opacity: 0.6; 28 background-color: black; 29 z-index: 9; 30 } 31 </style> 32 </head> 33 <body> 34 <a onclick="addElement();">添加</a> 35 36 <table border="1" id="tb"> 37 <tr> 38 <td target="hostname">1.1.1.11</td> 39 <td target="port">80</td> 40 <td target="ip">80</td> 41 <td> 42 <a class="edit">编辑</a> | <a class="del">删除</a> 43 </td> 44 </tr> 45 <tr> 46 <td target="hostname">1.1.1.12</td> 47 <td target="port">80</td> 48 <td target="ip">80</td> 49 <td> 50 <a class="edit">编辑</a> | <a class="del">删除</a> 51 </td> 52 </tr> 53 <tr> 54 <td target="hostname">1.1.1.13</td> 55 <td target="port">80</td> 56 <td target="ip">80</td> 57 <td> 58 <a class="edit">编辑</a> | <a class="del">删除</a> 59 </td> 60 </tr> 61 <tr> 62 <td target="hostname">1.1.1.14</td> 63 <td target="port">80</td> 64 <td target="ip">80</td> 65 <td> 66 <a class="edit">编辑</a> | <a class="del">删除</a> 67 </td> 68 69 </tr> 70 </table> 71 72 <div class="modal hide"> 73 <div> 74 <input name="hostname" type="text" /> 75 <input name="port" type="text" /> 76 <input name="ip" type="text" /> 77 78 79 80 </div> 81 82 <div> 83 <input type="button" value="取消" onclick="cancelModal();" /> 84 <input type="button" value="确定" onclick="confirmModal();" /> 85 </div> 86 </div> 87 88 <div class="shadow hide"></div> 89 90 <script src="jquery-1.12.4.js"></script> 91 <script> 92 93 $('.del').click(function () { 94 $(this).parent().parent().remove(); 95 }); 96 97 function confirmModal() { 98 99 var tr = document.createElement('tr'); 100 var td1 = document.createElement('td'); 101 td1.innerHTML = "11.11.11.11"; 102 var td2 = document.createElement('td'); 103 td2.innerHTML = "8"; 104 var td3 = document.createElement('td'); 105 td3.innerHTML = "80"; 106 var td4 = document.createElement('td'); 107 td4.innerHTML = "编辑"; 108 var td5 = document.createElement('td'); 109 td5.innerHTML = "删除"; 110 111 $(tr).append(td1); 112 $(tr).append(td2); 113 $(tr).append(td3); 114 115 $('#tb').append(tr); 116 117 $(".modal,.shadow").addClass('hide'); 118 // $('.modal input[type="text"]').each(function () { 119 // // var temp = "<td>..." 120 // 121 // 122 // 123 // }) 124 } 125 126 function addElement() { 127 $(".modal,.shadow").removeClass('hide'); 128 } 129 function cancelModal() { 130 $(".modal,.shadow").addClass('hide'); 131 $('.modal input[type="text"]').val(""); 132 } 133 134 $('.edit').click(function(){ 135 $(".modal,.shadow").removeClass('hide'); 136 // this 137 var tds = $(this).parent().prevAll(); 138 console.log(tds) 139 tds.each(function () { 140 // 获取td的target属性值 141 var n = $(this).attr('target'); 142 143 // 获取td中的内容 144 var text = $(this).text(); 145 var a1 = '.modal input[name="'; 146 var a2 = '"]'; 147 var temp = a1 + n + a2; 148 149 $(temp).val(text); 150 }); 151 152 153 // var port = $(tds[0]).text(); 154 // var host = $(tds[1]).text(); 155 // 156 // $('.modal input[name="hostname"]').val(host); 157 // $('.modal input[name="port"]').val(port); 158 // 循环获取tds中内容 159 // 获取 <td>内容</td> 获取中间的内容 160 // 赋值给input标签中的value 161 162 }); 163 </script> 164 </body> 165 </html>