Question

例如，我在桌面上使用ajax，jquery列出待售产品。每个表格行都有动态ID，例如row_1，row_2，row_3等。

可以选择删除任何行，例如删除第二行（row_2）。

所以我想要的是，删除行之后，表行ID也应该更新，可能是一个函数会执行此操作，例如我不希望它是row_1，row_3相反，我希望它是row_1，row_2。

Answer 1

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

Jquery部分

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

HTML部分

{{1}}

让我知道它是否适合你

Answer 2

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

$(".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>

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

2 个答案: