如何遍歷表的代碼

Question

我有一個表與下面的代碼

<table> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th>Item Name</th> 
      <th>Item Description</th> 
      <th>Picture URL</th> 
      <th>Requested Price</th> 
      <th>Category</th> 
      <th>t</th> 
     </tr> 
    </thead> 
    <tbody id="itemsTable"> 
     <tr index="0"> 
      <td>1</td> 
      <td><input id="itemName0" index="0"></td> 
      <td><textarea id="itemDescription0" index="0" maxlength="200"></textarea></td> 
      <td><input id="itemPicURL0" index="0"></td><td><input id="requestedPrice0" index="0"></td> 
      <td><input id="category0" index="0"></td> 
      <td><button class="btnRemove ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" index="0" role="button" aria-disabled="false"><span class="ui-button-text">Remove</span></button></td> 
     </tr> 
     <tr index="1"> 
      <td>2</td> 
      <td><input id="itemName1" index="1"></td> 
      <td><textarea id="itemDescription1" index="1" maxlength="200"></textarea></td> 
      <td><input id="itemPicURL1" index="1"></td><td><input id="requestedPrice1" index="1"></td> 
      <td><input id="category1" index="1"></td> 
      <td><button class="btnRemove ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" index="1" role="button" aria-disabled="false"><span class="ui-button-text">Remove</span></button></td> 
     </tr> 
     <tr index="2"> 
      <td>3</td> 
      <td><input id="itemName2" index="2"></td> 
      <td><textarea id="itemDescription2" index="2" maxlength="200"></textarea></td> 
      <td><input id="itemPicURL2" index="2"></td> 
      <td><input id="requestedPrice2" index="2"></td> 
      <td><input id="category2" index="2"></td> 
      <td><button class="btnRemove ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" index="2" role="button" aria-disabled="false"><span class="ui-button-text">Remove</span></button></td> 
     </tr> 
    </tbody> 
</table> 

我想使它所以如果用戶點擊該按鈕刪除，將刪除當前行，並重新索引所有其他行總是從0到行數 我可以刪除行，但重新索引是很難的部分，我如何遍歷表節點以便我可以更改它們的索引？

Answer 1

嘗試：

$(document).ready(function(){ 
$(".btnRemove").click(function(){ 
    $(this).parents("tr").remove(); //this is to remove respective row 
    $("table tbody#itemsTable").find("tr").each(function(i,v){ 
    $(this).attr("index",i); //this is to update row index 
    $(this).find("td").children().attr("index",i); // this to update index for all inputs & other stuff inside td. 
     $(this).find("td:first-child").text(i+1); //this is to update first td value in all rows 
    }); 
}); 
}); 

DEMO FIDDLE

Answer 2

簡簡單單就這樣的一個，選中此fiddle

$(function() { 
     $('.btnRemove').click(function(){ 
      $(this).parent().parent().remove(); 
     }) 
     $('.chckIndex').click(function(){ 
      alert($(this).parent().parent().index()); 
     }) 
    }); 

HTML代碼

<table> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th>Item Name</th> 
      <th>Item Description</th> 
      <th>Picture URL</th> 
      <th>Requested Price</th> 
      <th>Category</th> 
      <th>t</th> 
     </tr> 
    </thead> 
    <tbody id="itemsTable"> 
     <tr> 
      <td>1</td> 
      <td><input id="itemName0" index="0"></td> 
      <td><textarea id="itemDescription0" index="0" maxlength="200"></textarea></td> 
      <td><input id="itemPicURL0" index="0"></td><td><input id="requestedPrice0" index="0"></td> 
      <td><input id="category0" index="0"></td> 
      <td><button class="chckIndex" index="0" role="button" aria-disabled="false"><span class="ui-button-text">Get index</span></button></td> 
      <td><button class="btnRemove ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" index="0" role="button" aria-disabled="false"><span class="ui-button-text">Remove</span></button></td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td><input id="itemName1" index="1"></td> 
      <td><textarea id="itemDescription1" index="1" maxlength="200"></textarea></td> 
      <td><input id="itemPicURL1" index="1"></td><td><input id="requestedPrice1" index="1"></td> 
      <td><input id="category1" index="1"></td> 
      <td><button class="chckIndex" index="0" role="button" aria-disabled="false"><span class="ui-button-text">Get index</span></button></td> 
      <td><button class="btnRemove ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" index="1" role="button" aria-disabled="false"><span class="ui-button-text">Remove</span></button></td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td><input id="itemName2" index="2"></td> 
      <td><textarea id="itemDescription2" index="2" maxlength="200"></textarea></td> 
      <td><input id="itemPicURL2" index="2"></td> 
      <td><input id="requestedPrice2" index="2"></td> 
      <td><input id="category2" index="2"></td> 
      <td><button class="chckIndex" index="0" role="button" aria-disabled="false"><span class="ui-button-text">Get index</span></button></td> 
      <td><button class="btnRemove ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" index="2" role="button" aria-disabled="false"><span class="ui-button-text">Remove</span></button></td> 
     </tr> 
    </tbody> 
</table>