jQuery 模态对话框示例

  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>
View Code