我的脚本发生了一件奇怪的事情。
实际上,我有一个可以添加/删除行的表。当我删除一行时,每行的索引都会更新。具体来说,如果有 5 行,如果我删除第 2 行,第 3 行的索引变为 2,第 4 行的索引变为 3,等等。
奇怪的是,除了有 10 行或更多行之外,一切正常。实际上,如果有 10 行,例如,如果我删除第 9 行,则偏移量不起作用。第 10 行的索引仍然是 10,而不是 9。
我不明白我的代码有什么问题。
HTML
<table class="table table-without-padding-bot table-bordered table-striped" id="journey-table">
<tr>
<th>#</th>
<th>Place of departure</th>
<th>Place of arrival</th>
<th colspan="2">Distance of one trip</th>
</tr>
<tr>
<td class="journeyNumber"><input type="text" class="input-xsmall" value="1" disabled /></td>
<td class="departurePlace">
<div class="input-prepend">
<span class="add-on"><i class="icon-globe"></i></span>
<input type="text" class="input-large" name="departurePlace[]" placeholder="Place of departure"/>
</div>
</td>
<td class="arrivalPlace">
<div class="input-prepend">
<span class="add-on"><i class="icon-globe"></i></span>
<input type="text" class="input-large" name="arrivalPlace[]" placeholder="Place of arrival"/>
</div>
</td>
<td class="oneTripDistance">
<div class="input-append">
<input type="text" class="input-mini text-center" name="oneTripDistance[]"/>
<span class="add-on">km</span>
</div>
</td>
</tr>
</table>
<button class="btn btn-info" id="add-line"><i class="icon-plus"></i> Add another</button>
JavaScript
$('#journey-table').on('click', '.delete-line',function() {
var trIdToDel = $(this).parents("tr:first").find('.journeyNumber input').val();
$('#journey-table .journeyNumber input').each(function(){
if ($(this).val() > trIdToDel)
{
var newVal = $(this).val()-1;
$(this).closest('tr').attr('id', newVal);
$(this).val(newVal);
}
});
$(this).closest('tr').remove();
numJourney = numJourney-1;
updateTotalRequest();
});
$('#add-line').click(function(e)
{
e.preventDefault();
numJourney = numJourney+1;
newJourneyLine = $('#journey-table tr:nth-child(2)').clone();
newJourneyLine.find('.journeyNumber input').attr('value', numJourney);
newJourneyLine.append('<td><a href="#" class="delete-line"><i class="icon-remove"></i></a></td>');
$('#journey-table').append(newJourneyLine);
});