Question

所以我昨天问了一个非常类似的问题，关于嵌套列表，我认为我可以使用这个答案来创建嵌套列表和嵌套表。但是当我尝试修改jQuery来创建嵌套表时，它会变得有点乱。它不会嵌套，也不会嵌套整个表格，而子<tr>位于父<tr>下，而不仅仅是孩子<tr>。样本表：

<table>
    <tbody>
        <tr id="10"><td>Parent 1</td></tr>
        <tr id="14"><td>Parent 2</td></tr>
    </tbody>
</table>

<table>
    <tbody>
        <tr class="10"><td>Child A</td></tr>
        <tr class="10"><td>Child B</td></tr>
        <tr Class="14"><td>Child X</td></tr>
    </tbody>
</table>

（这个jQuery基于vzwick非常慷慨地帮助我的代码）jQuery看起来像这样：

$('tbody.csTR_children tr').each(function() {
        probable_parent = $('tbody.csTR_parent tr#' + $(this).attr('class'));
        if (probable_parent.length) {
            if (!probable_parent.find('tbody').length) probable_parent.append('<tbody/>');
        $(this).detach().appendTo(probable_parent.find('tbody'));
    }
});

这是我得到的最接近的，它在每个父行下面嵌套整个表格（在IE中它正确地嵌套第一个父和子，但其余部分没有），如上所述。有什么建议吗？

Answer 1

您正尝试将tbody附加到tr，这完全是错误的。 tbody必须直接位于table内，并且您无法将该表直接放在tr中，而是必须位于td

中

http://jsfiddle.net/ZDUQU/

所以基本上，将一个表附加到行中的第一个td：

probable_parent.children(":first").append('<table><tbody></tbody></table>');

Answer 2

看看这个。我认为它符合你的要求：

$('table#child tr').each(function() {
    var parentId = $(this).data('parentId');
    var parent = $('#' + parentId);
    if (parent) {
        var tbody = $('tbody', parent);
        if (tbody.length == 0) {
            // need to add the table wrapper
            tbody = $('<tbody>');
            var table = $('<table>').append(tbody);
            parent.append(table);
        }
        $(this).detach().appendTo(tbody);
    }
});

以下是您可以使用的jsFiddle：http://jsfiddle.net/78aXx/2/

鲍勃

Answer 3

$('tbody.csTR_children tr').each(function() {
    probable_parent = $('#' + $(this).data('parentID'));
    if (probable_parent.length) {
        if (!probable_parent.find('tbody').length)
        $(this).detach().insertAfter(probable_parent);
    }
});

jQuery基于Attribute创建嵌套表

3 个答案: