<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>modal-box</title>
    <style>
        .center{
            margin: 0 auto;
        }
        .shade{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.7;
            z-index: 8;
            background-color: black;
        }
        .modal,.edit{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 200px;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 9;
            background-color:#9a9a9a;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body class="center" style="width: 980px">
    <input id="inp1" type="button" value="添加" class="center"/>
    <table id="table1" border="1" >
        <thead>
          <tr>
              <th>IP</th>
              <th>PORT</th>
              <th>操作</th>
          </tr>
        </thead>
        <tbody id="tbody1">
            <tr>
                <td>1.2.3.61</td>
                <td>661</td>
                <td><input type="button" value="编辑" />&nbsp<input type="button" value="删除" /></td>
            </tr>
            <tr>
                <td>1.2.3.63</td>
                <td>663</td>
                <td><input type="button" value="编辑" />&nbsp<input type="button" value="删除" /></td>
            </tr>
            <tr>
                <td>1.2.3.66</td>
                <td>666</td>
                <td><input type="button" value="编辑" />&nbsp<input type="button" value="删除" /></td>
            </tr>

        </tbody>
    </table>
    <div class="shade hide"></div>
    <div class="modal hide" >
        <div>
            <input type="text">
            <input type="text">
        </div>
        <input type="button" value="确定" style="margin-top: 10px">
        <input type="button" value="取消">
    </div>
    <div class="edit hide" >
        <div>
            <input type="text">
            <input type="text">
            <input class="hide" type="text">
        </div>
        <input type="button" value="确定" style="margin-top: 10px">
        <input type="button" value="取消">
    </div>

    <script src="jquery3.6.1.js"></script>
    <script>
        //删除列
        function delTr(){
            $(this).parent().parent().remove();
        }
        //编辑列
        function editTr(){
            $('.edit,.shade').removeClass('hide');
            var tds = $(this).parent().siblings();
            //tds[0]是DOM对象
            var ip = tds[0].innerText;
            var port = tds[1].innerText;
            var index = $(this).parent().parent().index();
            var edit_div = $('.edit').children().first().children();
            edit_div[0].value = ip;
            edit_div[1].value = port;
            edit_div[2].value = index;
        }
        //添加键绑定
        $('#inp1').click(function (){
            $('.modal,.shade').removeClass('hide');
        });
        //模态中取消键绑定
        $('.modal').children().last().click(function (){
            $('.modal,.shade').addClass('hide');
            $('.modal').children().first().children().val('');
        });
        //模态中确定键绑定
        $('.modal').children('[value="确定"]').click(function (){
            var all = $(this).prev().children();
            var port = all[0].value;
            var ip = all[1].value;
            var tag = '<tr><td>' + ip +'</td><td>' + port + '</td><td><input type="button" value="编辑" />&nbsp<input type="button" value="删除" /></td></tr>';
            $('#tbody1').append(tag);
            //重新绑定一遍--编辑键及删除键，这一点很重要
            $('#tbody1 input[value="编辑"]').click(editTr);
            $('#tbody1 input[value="删除"]').on('click',delTr);
            $('.modal,.shade').addClass('hide');
            $(this).prev().children().val('');
        });
        //表格中编辑键绑定
        $('#tbody1 input[value="编辑"]').click(editTr);
        //表格中删除键绑定  $('#tbody1 input[value="删除"]')
        $('#tbody1 input[value="删除"]').on('click',delTr);
        //编辑框中确定键绑定
        $('.edit').children('[value="确定"]').click(function (){
            var all = $(this).prev().children();
            var port = all[1].value;
            var ip = all[0].value;
            var index = all[2].value;
            var tds = $('#tbody1').children().eq(index).children();
            tds[0].innerText = ip;
            tds[1].innerText = port;
            $('.edit,.shade').addClass('hide');
            $(this).prev().children().val('');
        });
        //编辑框中的取消键绑定
        $('.edit').children('[value="取消"]').click(function (){
            $('.edit,.shade').addClass('hide');
            $(this).prev().children().val('');
        });
    </script>
</body>
</html>

原文地址：http://www.cnblogs.com/lfyxys/p/16926376.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性