javascript - How to movereorder an html table row - Stack Overflow

admin管理员组

文章数量:1241160

The idea is to move a particular table row to a different location
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>

That is the basic table, now, how do I can I move the TR 11 in a away that it will be under TR 4, I'm sorry that I don't post any JS but I have no idea how to do it... I was looking at this JSbin which is nice but can't use it..

The idea is to move a particular table row to a different location
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>

That is the basic table, now, how do I can I move the TR 11 in a away that it will be under TR 4, I'm sorry that I don't post any JS but I have no idea how to do it... I was looking at this JSbin which is nice but can't use it..

• javascript
• jquery
• html

Share Improve this question Follow asked Mar 4, 2015 at 18:44 TankerTanker 1,19633 gold badges2020 silver badges5151 bronze badges 4

• Look at jQuery clone detach append. Can't answer thru my phone. – lshettyl Commented Mar 4, 2015 at 18:48
• Based on what criteria will you move row 11 under the 4th row? Also, do you expect to click somewhere in order to move that row? Think in terms of the User first, what steps will he/she take to "move" the row? – istos Commented Mar 4, 2015 at 18:54
• No, there are no criteria in order to move that particular row, the table is always the same and the content is displayed in that order, I could move that manually but I have no access to the file that generates that html, only the output which is that, the user don't need to click anywhere, once the html is loaded that row need to be move to it;s correct location.. – Tanker Commented Mar 4, 2015 at 19:02
• @LShetty clone and detach may not be appropriate. Tanker doesn't want to clone the element, just move it. – Popnoodles Commented Mar 4, 2015 at 19:05

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Move the 11th tr to under the 4th:

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

Working demo

If you prefer vanilla, you need the selectors the other way around.

document.querySelector("tbody tr:nth-child(4)").insertAdjacentElement("afterend", document.querySelector("tbody tr:nth-child(11)"));

In the context of an HTML table with rows that look like this:

<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>

And this script:

$('.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 () {

This is selecting every DOM element with the class "up" and every element with the class "down", e.g. $('.up,.down').click(function () {. The function sets up a click handler for each element.

var row = $(this).parents('tr:first');

$(this) refers to the DOM element which is the target of the click handler (one of the "up" or "down" elements which was selected above). .parents() looks for tr:first, the first <tr> element starting with <a> and travelling up the DOM. It'll end up selecting the entire row.

if ($(this).is('.up')) {

This is checking to see whether or not the element selected has the class "up" or not.

row.insertBefore(row.prev());

This takes the row that was clicked, and moves it right above the upper-most sibling of the row that was clicked.

The jQuery methods used (insertBefore, prev, is, parents, etc.) are described in greater detail in the jQuery documentation.

You can do it by using 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);

In order to move dynamically your elements you can add an event to all tbody children. What I basically do is select one element on first click then I move it after second element clicked.

$(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;
       }
    });
});

It move after an element but is just an idea, you can customize it.
Your html should be like this.

<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>

本文标签： javascriptHow to movereorder an html table rowStack Overflow