Question

想法是将特定的表行移动到不同的位置 HTML

<table id="grid1" class="table table-zebra">
    <tbody>
    <tr>
        <td>Cont 1 tr 1</td>
    </tr>
    <tr>
        <td>Cont 2 tr 2</td>
    </tr>
    <tr>
        <td>Cont 3 tr 3</td>
    </tr>
    <tr>
        <td>Cont 4 tr 4</td>
    </tr>
    <tr>
        <td>Cont 5 tr 5</td>
    </tr>
    <tr>
        <td>Cont 6 tr 6</td>
    </tr>
    <tr>
        <td>Cont 6 tr 6</td>
    </tr>
    <tr>
        <td>Cont 7 tr 7</td>
    </tr>
    <tr>
        <td>Cont 8 tr 8</td>
    </tr>
    <tr>
        <td>Cont 9 tr 9</td>
    </tr>
    <tr>
        <td>Cont 10 tr 10</td>
    </tr>
    <tr>
        <td>Cont 11 tr 11</td>
    </tr>

    <tr>
        <td>Cont 12 tr 12</td>
    </tr>

    <tr>
        <td>Cont 13 tr 13</td>
    </tr>

    <tr>
        <td>Cont 14 tr 14</td>
    </tr>
    </tbody>
</table>

这是基本表，现在，我如何才能将TR 11移到TR 4下，我很抱歉我没有发布任何JS，但我有不知道该怎么做......我正在看这个JSbin这很好但是不能用它..

Answer 1

将第11个tr移至第4个以下：

 $("tbody tr:nth-child(11)").insertAfter("tbody tr:nth-child(4)");

Working demo

Answer 2

您可以使用JQuery Library来完成。

// selecting tbody is bad instead you need to give an id or class to this tag and select according to this

var fourth = $( "tbody tr:nth-child(4)" ),
    eleventh = $( "tbody tr:nth-child(11)" );
$( "tbody tr:nth-child(11)" ).insertAfter(fourth);

Answer 3

在HTML表格的上下文中，行的行如下所示：

<tr class="form-grid-view-row">
    <td> 
        <a class="up" href="#">⇑</a>
    </td>
    <td> 
        <a class="down" href="#">⇓</a>
    </td>
    <td> 
        <span id="index1" class="form-label">1</span>
    </td>
    <td> 
        <span id="span1" class="form-label">Value 1</span>
    </td>
</tr>

这个脚本：

$('.up,.down').click(function () {
    var row = $(this).parents('tr:first');
    if ($(this).is('.up')) {
        row.insertBefore(row.prev());
    } else {
        row.insertAfter(row.next());
    }
});

$（'。up，.down'）。click（function（）{

这是选择具有“up”类的每个DOM元素以及具有“down”类的每个元素，例如$('.up,.down').click(function () {。该函数为每个元素设置单击处理程序。

var row = $（this）.parents（'tr：first'）;

$(this)指的是DOM元素，它是点击处理程序的目标（上面选择的“向上”或“向下”元素之一）。 .parents()会查找tr:first，第一个<tr>元素，以<a>开头，然后向上移动DOM。它最终会选择整行。

if（$（this）.is（'。up'））{

这是检查所选元素是否具有“up”类。

row.insertBefore（row.prev（））;

这将获取被单击的行，并将其移动到所单击行的最上面的兄弟上方。

使用的jQuery方法（insertBefore，prev，is，parents等）在jQuery documentation中有更详细的描述。

Answer 4

为了动态移动元素，您可以向所有tbody子项添加事件。我基本上做的是在第一次单击时选择一个元素然后在单击第二个元素后移动它。

$(document).on("ready", function () {
    var $tbody = $("#grid");
    var selected = null;
    $tbody.children().on("click", function () {
       if (selected == null)
           selected = this;
       else
       {
           $(selected).insertAfter(this);
           selected = null;
       }
    });
});

它移动一个元素但只是一个想法，你可以自定义它你的HTML应该是这样的。

<table>
    <tbody id="grid">
        <tr> <td> 1 </td> </tr>
        <tr> <td> 2 </td> </tr>
        <tr> <td> 3 </td> </tr>
        <tr> <td> 4 </td> </tr>
    </tbody>
</table>

如何移动/重新排序html表行

4 个答案: