动态生成的标签在多次删除后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>

posted @ 2018-05-15 13:51  雪化山河  阅读(350)  评论(1编辑  收藏  举报