Question

我的剧本发生了一件奇怪的事情。

实际上，我有一个表可以添加/删除行。删除行时，每行的索引都会更新。具体地说，如果有5行，如果删除第2行，则第3行的索引变为2，第4行的索引变为3，等等。

奇怪的是，除非有10行或更多行，否则一切正常。实际上，有10行，如果我删除第九行，例如，偏移量不起作用。第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);
});

Answer 1

错误在于您要比较字符串，而不是整数。

更改

if ($(this).val() > trIdToDel)

到

if (parseInt($(this).val(),10) > parseInt(trIdToDel,10))

因为"10"<"2"给出了true。

更一般地说，您最好解析所有值，以避免过多考虑。 $(this).val()-1即将开始工作，但$(this).val()+1不会。

jQuery each（）似乎在第九个元素后停止

1 个答案: