How to make child rows visible on clicking parent rows using javascript

Question

I have an HTML table in which there are parent rows and for every parent row, there are few child rows. I have to hide these child rows initially and when clicked on parent row, child rows should be shown.

I have a list of data and I am iterating through the list and for each iteration, I am appending the row to table like this.

 var json = [{ Message: "abc", name: "Some name", id: 345, col4: 2, col5: 5 }]; var $container = $("#container"); var $thead = $("#container table thead"); var $tbody = $("#container table tbody"); var $row = $("#container table tbody tr"); json.forEach(function(item) { var $button = $("<button>" + item.Message + "</button>"); $container.prepend($button); var table = $("<table>"); table.append($("<tr><th>col1</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th></tr>")); $button.on("click", function() { //parent row var row = $('<tr><td>' + item.Message + '</td>' + '<td>' + item.name + '</td>' + '<td>' + item.id + '</td>' + '</td>' + "" + '</td>' + '<td>' + "" + '</td></tr>'); table.append(row); //child row var row = $('<tr><td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + item.col4 + '</td>' + '<td>' + item.col5 + '</td></tr>'); table.append(row); $("#table").html(table); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div id="table"> </div> </div>

I want to give an id to each parent row and class for child rows and when clicked on parent row child rows should be shown.

Answer 1

What you need to do is give class to parent row and then toggle child rows based on jquery next function

 var json = [{ Message: "abc", name: "Some name", id: 345, col4:2, col5:5 }]; var $container = $("#container"); var $thead = $("#container table thead"); var $tbody = $("#container table tbody"); var $row = $("#container table tbody tr"); // Loop through items in JSON data.. json.forEach(function(item) { var $button = $("<button>" + item.Message + "</button>"); $container.prepend($button); var table = $("<table>"); table.append($("<tr><th>col1</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th></tr>")); // Button click handler.. $button.on("click", function() { // Replace row HTML.. //parent row var row=$('<tr class="parent_row" ><td>' + item.Message + '</td>' + '<td>' + item.name + '</td>' + '<td>' + item.id + '</td>' + '</td>' + "" + '</td>' + '<td>' + "" + '</td></tr>'); table.append(row); //child row var row=$('<tr style="display: none"><td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + item.col4 + '</td>' + '<td>' + item.col5 + '</td></tr>'); table.append(row); $("#table").html(table); $('.parent_row').click(function() { $(this).next().toggle(); }) // Show table if it's not already visible.. }); });

 table { margin-top: 20px; border: 1px solid silver; width: 500px; } th { text-align: left; } button { margin-left: 15px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div id="table"> </div> </div>

in case you have more than one child than you can use nextUntill('.parent_row')