jQuery 基于属性创建嵌套表

Question

因此，我昨天问了一个关于嵌套列表的非常类似的问题，认为我可以使用答案来创建嵌套列表和嵌套表。但是当我尝试修改 jQuery 以创建嵌套表时，它变得有点混乱。它要么不嵌套，要么嵌套整个表，其中子 位于父 下，而不仅仅是子 的。示例表：（

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