jQuery学习笔记---模态对话框，添加、编辑、删除(注意：click中绑定click，delegate：给后来元素自动添加事件)_$("input[name='hostname']").val(hostname);-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34964399/article/details/79353321

本文介绍了一个使用HTML和jQuery实现的简单表格编辑功能。通过点击按钮可以在表格中添加新行，并提供了编辑和删除功能。点击编辑按钮时，会弹出一个模态框供用户修改数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hidden{
            display:none;
        }
        .modal{
            position:fixed;
            width:500px;
            height:300px;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -200px;
            background-color: white;
            z-index:10;
        }
        .shadow{
            position:fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity:0.5;
            background-color:black;
            z-index: 9;
        }
    </style>
</head>
<body>
    <input onclick="add()" type="button" value="添加"/>
    <table border="1" width="200px " id="tb">
        <tr>
            <td target="hostname">1.1.1.1</td>
            <td target="port">80</td>
            <td target="seq">1</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.2</td>
            <td target="port">82</td>
            <td target="seq">2</td>
            <td>
                <a id='i2' class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.3</td>
            <td target="port">84</td>
            <td target="seq">3</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
    </table>
    <div class="modal hidden">
        <div id="modal1">
            <input name="hostname"  type="text"/>
            <input name="port"  type="text"/>
            <input name="seq"  type="text"/>
        </div>
        <div>
            <input type="button" value="取消"/>
            <input type="button" value="确认" />
        </div>
    </div>
    <div class="shadow hidden"></div>

    <script src="jquery-1.12.4.js"></script>
    <script>


        function add() {
            $('.modal,.shadow').removeClass('hidden');
            $('.modal input[value="确认"]').off().on('click',function(){

            //我的理解：
                var hostname = $("#modal1 input[name='hostname']").val();
                var port = $("#modal1 input[name='port']").val();
                var seq = $("#modal1 input[name='seq']").val();
                var tr = document.createElement('tr');
                var td1 = document.createElement('td');
                td1.innerHTML = hostname;
                td1.setAttribute('target','hostname');
                $(tr).append(td1);
//                console.log(tr);

                var td2 = document.createElement('td');
                td2.innerHTML = port;
                td2.setAttribute('target','port');
                $(tr).append(td2);

                var td3 = document.createElement('td');
                td3.innerHTML = seq;
                td3.setAttribute('target','seq');
                $(tr).append(td3);

                var td4 = document.createElement('td');
                td4.innerHTML = '<a class="edit">编辑</a> | <a class="del">删除</a>';
//                $(td4).children('[class="edit"]').attr('onclick','func()');   // 用这种$('.edit').click(function() 绑定click事件，新加的点击编辑没有用，需要添加onclick才有用或直接用$('.c').delegate('a', 'click', function(){
                $(tr).append(td4);
                $('#tb').append(tr);


        })
        }



        //点击edit
        // $('table').delegate('a','click',function(){  不能写$('tb') 因为这是table下的a标签添加点击功能，而这个table是固定的。而写成tr，tr是新加入的，这样就找不到a标签
        $('table').delegate('a','click',function(){
            //点击编辑，出现模态框
            $(this).css('color','red');
            $('.modal,.shadow').removeClass('hidden');
            var tds  = $(this).parent().prevAll();   //this：有编辑的a标签；获取到同一个tr下的所有td
            //将表格中的值输入到模态框
            tds.each(function(){
               var val = $(this).attr('target');   //this ：当前td；（作用域，此this不同于上个this） val：当前td的target值
               var txt = $(this).text();
               $('.modal input[name="' + val +  '"]').val(txt); //将内容添加到modal的input框中
            })
            $('.modal input[value="确认"]').off().on('click',function(){confirm(tds)});

//            var host = $(tds[1]).text();   //tds[1] 会变成dom对象
//            var port = $(tds[0]).text();
        //将选中编辑的对话框的元素放入到input中
//            $("input[name='hostname']").val(host);
//            $("input[name='port']").val(port);
                   //点击确认，将修改过得值重新赋值给表格
            function confirm(self){
                var hostname = $("#modal1 input[name='hostname']").val();
                var port = $("#modal1 input[name='port']").val();
                var seq = $("#modal1 input[name='seq']").val();
                console.log(11111);
                self.eq(0).text(seq);     // eq(0) 对应的是seq
                self.eq(1).text(port);
                self.eq(2).text(hostname);
            }

        })

        // 点击删除
//        $('.del').click(function() {
//                $(this).parent().parent().remove();
//        })

        //点击取消，去除input框中的内容
        $('.modal input[value="取消"]').click(function(){
            $(".modal input[type='text']").val("");
            $('.modal,.shadow').addClass('hidden');
        })

        function func() {
            //点击编辑，出现模态框
            $('.modal,.shadow').removeClass('hidden');
        }
    </script>
</body>
</html>