jQuery Created Nested Table Based on Attribute

Question

So I asked a very similar question yesterday about nested lists thinking that I would be able to use the answer both for creating nested lists and nested tables. But when I try to modify the jQuery to created nested tables it goes a little haywire. Either it doesn't nest or it nests an entire table with the child <tr>'s under the parent <tr> instead of just the child <tr>'s. Sample tables:

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

(This jQuery is based on code that vzwick very graciously helped me with) The jQuery looks like this:

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

This is the closest I get and it nests an entire table under each parent row (in IE it nests the first parent and child properly but the rest it doesn't), as I said above. Any suggestions?

James Montagne · Accepted Answer · 2011-10-04 13:40:09Z

1

You are trying to append a tbody to a tr which is just completely wrong. A tbody must be directly within a table and you can't put that table directly in the tr, it has to be in a td

http://jsfiddle.net/ZDUQU/

So basically, append a table to the first td in the row:

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

answered Oct 4, 2011 at 13:40

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

kramden88 Over a year ago

Thank you. It works nicely but I ran into a little problem...if I add any more td's to the parent (or child), it breaks.

James Montagne Over a year ago

Seems to work fine for me: jsfiddle.net/ZDUQU/1 can you update the fiddle and post it broken?

kramden88 Over a year ago

Sorry, what I meant was if I add td's to the existing tr's jsfiddle.net/h6y5a/2/. If I replace your last line of code with $(this).detach().appendTo(probable_parent.next('table').find('tbody')); it gets closer but not quite there.

James Montagne Over a year ago

Then you need to give some indication of which td is the "parent". Try this: jsfiddle.net/h6y5a/3

kramden88 Over a year ago

Ideally the entire row is the parent. I just want them stacked one on top of another. Am I chasing something that's not possible? jsfiddle.net/h6y5a/4

|

rcravens · Accepted Answer · 2011-10-04 13:20:47Z

0

Take a look at this. I think it does what you want:

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

Here is a jsFiddle for you to play with: http://jsfiddle.net/78aXx/2/

Bob

answered Oct 4, 2011 at 13:20

rcravens

8,3982 gold badges35 silver badges27 bronze badges

2 Comments

kramden88 Over a year ago

Thank you for your answer! If you look at the jsFiddle, though, it's putting child tables under each tr. I would like the child tr's directly under the parent.

James Montagne Over a year ago

parent is a tr so you can't append a table to it.

kramden88 · Accepted Answer · 2011-10-05 12:26:41Z

0

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

answered Oct 5, 2011 at 12:26

kramden88

25.7k3 gold badges21 silver badges17 bronze badges

Collectives™ on Stack Overflow

jQuery Created Nested Table Based on Attribute

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related