zoukankan      html  css  js  c++  java
  • 自定义属性-模态框的改进

    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);
    

     

  • 相关阅读:
    JQuery性能优化
    分页控件X.PagedList.Mvc
    《转》sql 、linq、lambda 查询语句的区别
    Linq的连表查询
    MVC页面直接F5出错
    详解集合
    Json的序列化与反序列化
    《转》dbcontext函数
    《转》jquery中的$.ajax的success与error
    cocos creator基础-(二十七)httpclient Get POST
  • 原文地址:https://www.cnblogs.com/momo8238/p/7467249.html
Copyright © 2011-2022 走看看