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

moveup =  $(this).parent();

此处，this指的是跨度，因此其父级是td而不是行。如果要移动整行，则应查看.closest()（1），然后使用.prev()或.next()。

你接近解决方案，我会让你工作一点;）

1 - ＆gt; https://api.jquery.com/closest/

Answer 2

您遍历和修改DOM的逻辑并不完全正确。您需要获取父tr元素，然后在prev / next 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

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

用jQuery重新排序表

2 个答案: