javascript - 使用 jQuery 重新排序表

Question

如何重新排列表格行？

<table class="table table-bordered" style="text-align: center; width: 95%;">
    <tr>
        <td style="width: 2%;"></td>
        <td>Prekės pavadinimas</td>
        <td style="width: 15%;">Kiekis</td>
        <td style="width: 15%;">Kaina</td>
        <td style="width: 15%;">Suma</td>
        <td style="width: 2%;"></td>
    </tr>
    <tr>
        <td style="vertical-align: middle;">
            <span class="glyphicon glyphicon-menu-up"></span><br>
            <span class="glyphicon glyphicon-menu-down"></span>
        </td>
        <td style="vertical-align: middle;">
            <div class="form-group">
                <label for="product"></label>
                <input type="text" class="form-control" id="product" name="product" placeholder="Prekė">
            </div>
        </td>
        <td style="vertical-align: middle;">
            <div class="form-group">
                <label for="quantity"></label>
                <input type="text" class="form-control" id="quantity" name="quantity" placeholder="Kiekis">
            </div>
        </td>
        <td style="vertical-align: middle;">
            <div class="form-group">
                <label for="price"></label>
                <input type="text" class="form-control" id="price" name="price" placeholder="Kaina">
            </div>
        </td>
        <td style="vertical-align: middle;">
            <div class="form-group">
                <label for="total"></label>
                <input type="text" class="form-control" id="total" name="total" placeholder="Suma" disabled>
            </div>
        </td>
        <td style="vertical-align: middle;"><a href="#"><span class="glyphicon glyphicon-remove" style="color: red;"></span></a></td>
    </tr>
</table>

$('tr td span:nth-of-type(1)').on('click', function() {
    moveup = $(this).parent();
    moveup.prev().before(moveup);
});

$('tr td span:nth-of-type(2)').on('click', function() {
    movedown = $(this).parent();
    movedown.next().after(movedown);
});

下面是我的代码现在如何使用 jQuery: http://jsfiddle.net/zJ8hd/21/

提前感谢您的帮助! :)

Answer 1

您遍历和修改 DOM 的逻辑不太正确。您需要获取父 tr 元素，然后将其插入到上一个/下一个 tr 之前/之后，如下所示:

$('tr td span:nth-of-type(1)').on('click', function() {
    var $row = $(this).closest('tr')
    if ($row.index() == 1)
        return;
    $row.insertBefore($row.prev());
});

$('tr td span:nth-of-type(2)').on('click', function() {
    var $row = $(this).closest('tr')
    $row.insertAfter($row.next());
});

Working example

请注意，我在 fiddle 中添加了 foo 和 bar 作为默认字段值，只是为了让移动更加明显。