- <!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>
来源: http://www.bubuko.com/infodetail-1864713.html