Question

我有以下表格代码：

<tbody>
    <tr data-id='1' id='item-1'>
        <td>30-01-2014</td>
    </tr>   
    <tr data-id='19' id='item-2'>
        <td>30-01-2014</td>
    </tr>
    <tr data-id='5' id='item-3'>
        <td>30-01-2014</td>
    </tr>
    <tr data-id='39' id='item-4'>
        <td>30-01-2014</td>
    </tr>
</tbody>

和jQuery：

$('table tbody').sortable({
    axis: 'y',
    update: function (event, ui) {
        var data = $(this).sortable('serialize');
        $.ajax({
            data: data,
            type: 'POST',
            url: 'updatePagesOrder.php'
        });
    }
});
var i = 1;
$('table > tbody  > tr').each(function () {
    $('tr').attr('id', 'item-' + i);
    i++;
});

我想要做的是在执行sortable功能之后，项目的ID将再次从1到4进行排序。我试过上面的代码，但它没有用。

希望得到帮助......谢谢！

Answer 1

无需声明i您已使用.each()所以

试试这个

$('table > tbody tr').each(function (i) {
     $(this).attr('id', 'item-' + (i + 1)); // use $(this) as a reference to current tr object
});

使用(i+1)因为索引从0

开始

Demo

Answer 2

而不是$('tr')圈内的.each()，请使用$(this)：

$('table > tbody tr').each(function () {
    $(this).attr('id', 'item-' + i);
    i++;
});

Answer 3

我可能不太了解您的问题，但我相信您希望每当表行重新排序时都会更新ID？

如果是这种情况，那么我认为问题是您在初始化可排序插件后更新了ID，但是当用户重新排序表行时，将覆盖此更改。您应该做的是更新更新功能中的ID。如果要在序列化后更新ID，请在调用序列化后将调用置于updateRowIDs（）。

$('table tbody').sortable({
    axis: 'y',
    update: function (event, ui) {
        updateRowIDs();
        var data = $(this).sortable('serialize');
        $.ajax({
            data: data,
            type: 'POST',
            url: 'updatePagesOrder.php'
        });
    }
});

function updateRowIDs()
{
    var i = 1;
    $('table > tbody  > tr').each(function() {
        this.id = 'item-' + i;
        i++;
    });
}

使用jQuery重新编号表行的id

3 个答案:

Demo