如何使用 javascript 在單擊父行時使子行可見

Question

我有一個 HTML 表，其中有父行，對於每個父行，子行很少。 我最初必須隱藏這些子行，當單擊父行時，應顯示子行。

我有一個數據列表，我正在遍歷列表，對於每次迭代，我都將行附加到表中，如下所示。

 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>

我想給每個父行一個 id 和 class 子行，當單擊父行時，應該顯示子行。

Answer 1

您需要做的是將 class 提供給父行，然后根據 jquery 下一個 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>

如果您有多個孩子，則可以使用nextUntill('.parent_row')