javascript - 如何使用 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，当单击父行时，应该显示子行。

Answer 1

您需要做的是为父行提供类，然后根据 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>

如果您有多个 child ，您可以使用 nextUntill('.parent_row')