摘要：
DOCTYPE html˃title。c1{背景颜色：灰色；位置：固定；顶部：0；左侧：0；右侧：0；底部：0；容量：1；}。c2｛背景色：白色；位置：固定；顶部：50%；左侧：50%；高度：300px；宽度：626px；顶部边距：-150px；左侧边距：-400px；｝。c3{color:#000；}。side｛display：none；｝主机名IP端口配置12localhost1.1.1.18080localhost1.1.1.23306˃localhost1.1.1.380$.click；$。单击；$。单击ps：您可以复制过去的测试。
###
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: gray; position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 1; } .c2{ background-color: white; position: fixed; top: 50%; left: 50%; height: 300px; width: 626px; margin-top: -150px; margin-left: -400px; } .c3{ color: #000; } .hide{ display: none; } </style> </head> <body> <input id="i1" type="button" value="添加"> <table border="1px"> <thead> <tr> <th>主机名</th> <th>IP</th> <th>端口</th> <th>配置</th> </tr> </thead> <tbody> <div id="i2" class="c1 hide">12</div> <tr> <td>localhost</td> <td>1.1.1.1</td> <td>8080</td> <td><input class="c3" type="button" value="编辑"><input type="button" value="删除"></td> </tr> <tr> <td>localhost</td> <td>1.1.1.2</td> <td>3306</td> <td><input class="c3" type="button" value="编辑"><input type="button" value="删除"></td> </tr> <tr> <td>localhost</td> <td>1.1.1.3</td> <td>80</td> <td><input class="c3" type="button" value="编辑"><input type="button" value="删除"></td> </tr> </tbody> <div id="i3" class="c2 hide"> <div id="i4"> <input type="text" name="hostname" /> <input type="text" name="ipaddr" /> <input type="text" name="port"/> </div> <input type="button" value="取消"> <input type="button" value="确定"> </div> </table> <script src="jquery-3.2.1.js"></script> <script> $('#i1').click(function () { $('#i2,#i3').removeClass('hide'); }); $("input[value='取消']").click(function () { $('#i2,#i3').addClass('hide'); $(".c2 input[type='text']").val(''); }); $('.c3').click(function () { var h = $('#i2,#i3').removeClass('hide'); tds = $(this).parent().siblings(); var hostname = $(tds[0]).text(); var ipaddr = $(tds[1]).text(); var port = $(tds[2]).text(); // console.log(hostname,ipaddr,port); // var v1 = $('#i4').children("input[name='hostname']").val(hostname); // var v2 = $('#i4').children("input[name='ipaddr']").val(ipaddr); // var v3 = $('#i4').children("input[name='port']").val(port); var v1 = $(".c2 input[name='hostname']").val(hostname) var v2 = $(".c2 input[name='ipaddr']").val(ipaddr); var v3 = $(".c2 input[name='port']").val(port); }) </script> </body> </html>
ps：大家可以复制过去测试下。
静态效果图：
12 ###
| 主机名 | IP | 端口 | 配置 |
|---|---|---|---|
| localhost | 1.1.1.1 | 8080 | |
| localhost | 1.1.1.2 | 3306 | |
| localhost | 1.1.1.3 | 80 |