jQuery学习笔记---菜单内容切换

最新推荐文章于 2023-12-26 21:16:38 发布

原创最新推荐文章于 2023-12-26 21:16:38 发布 · 880 阅读

0 ·

CC 4.0 BY-SA版权

jQuery学习笔记专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的简单表格编辑功能。通过点击“编辑”链接，可以弹出一个模态框，允许用户修改表格中的主机名、端口和序列号等信息。该示例展示了如何利用jQuery简化DOM操作。

摘要生成于 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>
            <input name="hostname" type="text"/>
            <input name="port" type="text"/>
            <input name="seq" type="text"/>
        </div>
        <div>
            <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');
        }
        //点击edit出现模态框
        $('.edit').click(function(){
            $('.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框中
            })
//            var host = $(tds[1]).text();   //tds[1] 会变成dom对象
//            var port = $(tds[0]).text();
        //将选中编辑的对话框的元素放入到input中
//            $("input[name='hostname']").val(host);
//            $("input[name='port']").val(port);
        })
        //点击取消，去除input框中的内容
        $('.modal input[value="取消"]').click(function(){
            $(".modal input[type='text']").val("");
            $('.modal,.shadow').addClass('hidden');
        })
    </script>
</body>
</html>