zoukankan      html  css  js  c++  java
  • 动态生成的标签在多次删除后id顺序混乱不好定位的解决方法(重排id)

      有时候页面一些操作需要动态生成一些填写框或者选择框什么的,而这些框又需要id定位,很多伙伴会按照一定顺序排序这个id,但是如果遇到用户新增加了一个框,又删了一个框这种情况,就会导致按顺序排列的id出现混乱,如果这个时候需要通过js来获取某个值,就不好定位了,出现这种情况,有个最好的方法,那就是每次删除后,重新配列这些id!保证id都是按照顺序正常排列的!

    具体实现代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>重排列id</title>
    </head>
    <script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
    <body>
      <input type="button" value="添加" id="tian"/>
      <!--<input type="button" value="删除" id="shan"/>-->
      <div id="d1">
        <table id="tab" style="display: none;" cellspacing="0px" border="1px solid black">
          
        </table>
      </div>
    </body>
    <script type="text/javascript">
      var dId = 0;
      $(function(){

        //添加
        $("#tian").click(function(){
          $("#tab").show();
          var html = "<tr id='t_"+dId+"'>"
                +"<td><input type='text' class='in' id='d_"+dId+"' value='你好'/></td>"
                +"<td><input type='button' value='删除' id='shan'/></td>"
              +"</tr>";
          $("#tab").append(html);
          dId++;
        });
      })

      //删除
      $(document).on('click','#shan', function () {
        $(this).parents("tr").remove();
        chongId();
        if($(".in").length == 0){
          $("#tab").hide();
        }
      });
      
      //一旦删除后重新排序id
      function chongId(){
        dId = $(".in").length;
        for(var i=0;i<dId;i++){
          $("#tab tr:eq("+i+")").attr("id","t_"+i);
          $("#tab tr:eq("+i+") td:eq(0) input").attr("id","d_"+i);
        }
      }
    </script>
    </html>

  • 相关阅读:
    asp.net发布网站的时候三个选项
    Web Service 异常处理
    Asp.net 缓存技术总结
    自定义控件:广告内容后期加载。以及NamingContainer层次的应用
    图片显示时加水印(不改变原图片)
    .NET 2.0中的企业库异常处理块简述
    .NET反射、委托技术与设计模式
    三角函数Table.AddColumn(Power Query 之 M 语言)
    统计信息Table.AddColumn(Power Query 之 M 语言)
    提取Table.AddColumn(Power Query 之 M 语言)
  • 原文地址:https://www.cnblogs.com/xuehuashanghe/p/9040615.html
Copyright © 2011-2022 走看看