У меня есть таблица со следующим кодом
<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 до количества строк, которые я могу удалить, но переиндексирование - это трудная часть, как я перемещаю узлы таблицы, чтобы я мог изменять индексы на них?
Пытаться:
$(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
});
});
});
просто сделайте это простым, как этот, проверьте эту скрипку
$(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>