動的に作成されたテーブル行IDをJqueryを使用してシリアルに処理する

Question

たとえば、表のajax、jqueryを使用して販売する商品をリストしています。すべてのテーブル行が動的IDのようになっている場所、row_1、row_2、row_3など

2行目（row_2）が削除されるなど、行を削除するオプションがあります。

それで、行が削除された後、テーブル行IDも更新されるはずです。たとえば、関数がそれを実行するとします。たとえば、row_1、row_3にする必要はありません。 row_1、row_2です。

Answer 1

私のプロジェクトのどこかで、このコードはすでにわかっていましたが、あなたの必要に応じて少し微調整しました。

jQueryの一部

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

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

それはそれは簡単です、あなた

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>