根据给定条件对表格tr进行排序

Question

html JS FIDDLE HERE 请参阅第一个示例home，Scripts，Snippet。如果Script Parent为1，则应该在home tr下，如果Snippet parent id为6，则它位于Script菜单下

<table id="sort-table">
    <tbody>
        <tr>
            <th>Id</th>
            <th>Parent</th>
            <th>Title</th>
        </tr>
        <tr>
            <td>1</td>
            <td>0</td>
            <td>home</td>
        </tr>
        <tr>
            <td>2</td>
            <td>0</td>
            <td>Code</td>
        </tr>
        <tr>
            <td>3</td>
            <td>0</td>
            <td>Contact</td>
        </tr>
        <tr>
            <td>4</td>
            <td>10</td>
            <td>PHP</td>
        </tr>
        <tr>
            <td>5</td>
            <td>2</td>
            <td>CSS</td>
        </tr>
        <tr>
            <td>6</td>
            <td>1</td>
            <td>Scripts</td>
        </tr>
        <tr>
            <td>8</td>
            <td>4</td>
            <td>Archive</td>
        </tr>
        <tr>
            <td>9</td>
            <td>6</td>
            <td>Snippet</td>
        </tr>
        <tr>
            <td>10</td>
            <td>0</td>
            <td>samitha</td>
        </tr>
        <tr>
            <td>7</td>
            <td>4</td>
            <td>help</td>
        </tr>
    </tbody>
</table>
<span></span>

<br>
<button class="sort-table asc">sort</button>

jquery的

 $('.sort-table').click(function (e) {


        var table = $("table tbody");

        table.find('tr').each(function () {
            var $tds = $(this).find('td'),
                id = $tds.eq(0).text(),
                parent = $tds.eq(1).text(),
                title = $tds.eq(2).text();

            if (parent === 0) {




            }

        });

    });

输出

Id  Parent  Title
1   0       home
2   0       Code
3   0       Contact
4   10      PHP
5   2       CSS
6   1       Scripts
8   4       Archive
9   6       Snippet
10  0       samitha
7   4       help

我想按照下面的方式对其进行排序

第二张表

   Id   Parent  Title
    1   0       home
    6   1       Scripts
    9   6       Snippet
    2   0       Code
    5   2       CSS
    3   0       Contact
    10  0       samitha
    4   10      PHP
    8   4       Archive
    7   4       help

我想如果父ID是菜单的id，它需要排在第2个表之上。我做了一些事情，我需要继续这个吗？

Answer 1

由于没有明显的系统要排序，我想你必须自己定义一些东西：

$('.sort-table').click(function (e) {
    var sort  = [1,6,9,2,5,3,10,4,8,7],
        table = $("table tbody"),
        tr    = table.find('tr');

    $.each(sort, function(_,index) {
        tr.filter(function() {
            return parseInt($('td:first', this).text(), 10) == index;
        }).appendTo(table);
    });
});

FIDDLE

修改

我想也许我明白了，但我可能不会这样做？ 如果你试图在当前TR等具有给定父元素的ID的TR元素之后添加每个TR元素...... ???

无论如何，试试这个：

$('.sort-table').click(function (e) {
    var table = $("table tbody"),
        tr    = table.find('tr');

    $.each(tr, function(_,el) {
        var par = parseInt($(el).find('td').eq(1).text(), 10);
        if (par !== 0) {
            var par_el = tr.find('td:first').filter(function() {
                return parseInt($(this).text(),10) == par;
            }).closest('tr');
            par_el.after(el);
        }
    });
});

FIDDLE