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

本文介绍了一个使用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>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值