使用Jquery按顺序删除和更新动态创建的表行ID

For example I am listing products for sale using ajax, jquery on Table. Where every table row are getting dynamic id's like, row_1, row_2, row_3 etc.

例如,我在桌面上使用ajax,jquery列出待售产品。每个表行都获得动态id,如row_1,row_2,row_3等。

There is an option to remove any of rows, for example second row(row_2) is removed.

可以选择删除任何行,例如删除第二行(row_2)。

So what I want is, after the row gets deleted, the table row id's should get update also, probably a function will do it, for example I don't want it to be row_1, row_3 instead I want it to be row_1, row_2.

所以我想要的是,删除行之后,表行ID也应该更新,可能是函数会这样做,例如我不希望它是row_1,而是我想要它是row_1,而不是我想要它是row_1,row_2 。

2 个解决方案

#1

I'd this code already with me somewhere in my project, tweaked little but as per your need.

我的代码已经在我的项目中的某个地方已经存在,根据您的需要进行了一些调整。

Jquery part

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){

    $(".remove_tr").click(function(){

        var tr_id = $(this).parent().attr("id");

        var flag = "N"; var row_cnt = 0;

        $("#dummy_table tr").each(function(){

            if( flag == "Y" ){ 

                $(this).attr("id", "row_"+ row_cnt); 
                $(this).children("td:first-child").html("row_"+ row_cnt); 
                $(this).attr("id", "row_"+ row_cnt); 
                row_cnt++; 
            }

            if( flag =="N" && $(this).attr("id") == tr_id){ 

                var rowArr = $(this).attr("id").split("_");
                row_cnt = rowArr[1]; 

                $(this).remove(); flag= "Y";  
            }                                        
        })
    });
});
</script>

HTML part

<table id="dummy_table">
    <?php for($i = 0; $i < 10; $i++){ ?>        
        <tr id="row_<?php echo $i; ?>">
            <td>row_<?php echo $i; ?></td>
            <td class="remove_tr">remove</td>
        </tr> 
    <?php } ?>        
</table>

Let me know if it works for you

请让我知道这对你有没有用

#2

It's simple. Run code snippet below.

这很简单。在下面运行代码段。

$(".remove").click(function() {
  
  $(this).parent().remove();
  
  var counter = 1;
  $("#foo tr").each(function() {

    $(this).attr('id', 'row_'+counter);
    $(this).find('td:first-child').html('row_'+counter);  //just to show the result     
    counter++;
    
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table id="foo">
          
  <tr id="row_1" class="block" >
    <td>row_1</td>
    <td class="remove">remove</td>
  </tr> <br>
  
  <tr id="row_2" class="block" >
    <td>row_2</td>
    <td class="remove">remove</td>
  </tr> <br> 
  
  <tr id="row_3" class="block" >
    <td>row_3</td>
    <td class="remove">remove</td>
  </tr> <br>
  
  <tr id="row_4" class="block" >
    <td>row_4</td>
    <td class="remove">remove</td>
  </tr> <br>
  
</table>

#1