javascript - 如何使用JavaScript在单击父行时使子行可见

我有一个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，单击父行时应显示子行。

最佳答案

您需要做的是将类赋予父行，然后根据jquery next函数切换子行

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

关于javascript - 如何使用JavaScript在单击父行时使子行可见，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58302754/