Expandable Table

Question

In this script below https://jsfiddle.net/gatkzgtw/4/ I have a table that expands when we click on the line. when expanding it shows me a second table. the problem is that the script is repeating itself in this second table inpedindo to show all the lines, in this second table if we just click there and show the rest of the lines, how can I make the script only work the expantion in the first table?

Answer 1

The best thing would be 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.

Usa thead and tbody, especially in this case where you have tables inside tables the selectors are more accurate. It also uses direct descending selector > who avoids finding others tr inside the table that is inside 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: https://jsfiddle.net/gxr47dqr/

and to be part of it in CSS you can do it like this: https://jsfiddle.net/gxr47dqr/2/