• 自定义属性-模态框的改进


    1. 用this的话,跟顺序和索引就没有任何关系了,完全就是用属性绑定的。

       如果要增加新的列的话,JS里面不需要做任何调整。

      模态框程序如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .hide{
                display:none;
            }
            .model{
                position:fixed;
                top:50%;
                left:50%;
                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="addElement();">添加</a>
        <table border="1px">
            <tr>
                <td target="hostname">1.1.1.11</td>
                <td target="port">80</td>
                <td>
                    <a class="edit">编辑</a> | <a>删除</a>
                </td>
            </tr>
                    <tr>
                <td target="hostname">1.1.1.12</td>
                <td target="port">80</td>
                <td>
                    <a class="edit">编辑</a> | <a>删除</a>
                </td>
            </tr>
                    <tr>
                <td target="hostname">1.1.1.13</td>
                <td target="port">80</td>
                <td>
                    <a class="edit">编辑</a> | <a>删除</a>
                </td>
            </tr>
        </table>
        <div  class="model hide">
            <div>
                <input name="hostname" type="text"/>
                <input name="port" type="text"/>
                <input type="text"/>
            </div>
            <div>
                <input type="button" value="取消" onclick="cancelModel();"/>
            </div>
        </div>
            <div class="shadow hide"></div>
    
        <script src="jquery-1.12.4.js"></script>
        <script>
            function addElement(){
                //$('.model').removeClass('hide');
                //$('.shadow').removeClass('hide');
                $('.model,.shadow').removeClass('hide');
            }
            function cancelModel(){
                $('.model,.shadow').addClass('hide');
                $('.model input[type="text"]').val("");
            }
            $('.edit').click(function(){
                $('.model,.shadow').removeClass('hide');
                //this 代指当前点击的标签
                var tds=$(this).parent().prevAll();
                tds.each(function(){
                    //this,代指当前每个td;获取td的target属性值
                    var n=$(this).attr('target');
                    //获取td中的内容
                    var text=$(this).text();
                    var a1='.model input[name="';
                    var a2='"]';
                    var tmp=a1+n+a2;
                    $(tmp).val(text);
    
                })
    
            });
        </script>
    
    </body>
    </html>
    

     或者直接写成一串:

                tds.each(function(){
                    var n=$(this).attr('target');
                    var text=$(this).text();
                    $('.model input[name="'+n+'"]').val(text);
    

     字符串的拼接:'.model input[name=" '   +n + ' "] '

    说明及解释如下:

                    var n=$(this).attr("target"); //port,hostname
                    console.log(n);
                    var text=$(this).text(); //80,1.1.1.11
                    console.log(text);
    

     

  • 相关阅读:
    使用JS实现复制粘贴功能
    前端向后端发送请求(FormData),你们不要吐槽我,有的时候我也不想写注释
    最全面的数组去重详细解析
    查找字符串数组中的最长公共前缀
    最简单的让多行表格滚动方法
    送给vue初学者的 vue.js技巧
    git 和码云的上传文件代码操作
    常用模块 二
    深拷贝与浅拷贝
    常用模块升级
  • 原文地址:https://www.cnblogs.com/momo8238/p/7467249.html
Copyright © 2020-2023  润新知