Expandable Table

Question

Expandable Table

Navigation

#1 by (4 votes)

3

In this script down link I have a table that expanded when we clicked the line. as it expands it shows me a second table. the problem is that the script is being repeated in this second table, preventing all lines from showing, in that second table if we click only there and shown the rest of the line, how can I make the script only work the expansion in the first table? >

javascript

asked by anonymous 13.10.2015 / 03:05

1 answer

Formatting Text in a JTextPane Excel - Extract only numeric fields from a selection containing texts and numbers

score 4 · Accepted Answer

It was best to do this with CSS and give the classes on the server when you generate this HTML. But to answer your question and do this via JavaScript I suggest some changes.

Uses thead and tbody , especially in this case where you have tables inside tables, the selectors become more certain. It also uses direct descendant selector > which avoids finding other tr within the table that is within a tr .

So you can use:

$(document).ready(function () {
    $("#report > tbody > tr").hide();
    $("#report > tbody > tr:even").addClass("odd").show();

    $("#report tr.odd").click(function () {
        $(this).next("tr").toggle();
        $(this).find(".arrow").toggleClass("up");
    });
});

jsFiddle: link

And to be part of this in CSS you can do this: link