使用jQuery遍历表

我有一个带有以下代码的表：

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

#
项目名称
项目说明
图片URL
要求价格
类别
T
1.
去除
2.
去除
3.
去除

我想这样做，如果用户单击“删除”按钮，它将删除当前行，并将所有其他行重新索引为始终从0到行数 我可以删除该行，但重新编制索引是最困难的部分，如何遍历表节点以便更改它们上的索引？

尝试：

$(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
    });
});
});

---

简单点，就像这个，检查这个

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>

#
项目名称
项目说明
图片URL
要求价格
类别
T
1.
获取索引
去除
2.
获取索引
去除
3.
获取索引
去除

它更改了tr的索引，但没有输入和其他内容的索引，如果您注意到，每个节点的输入都有一个索引。。。“我怎样才能联系到他们呢？”LenaBru更新了我的答案检查。

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