如何使用jquery切换到下一个父行？

Question

我有一个表，并且给每个父行一个类。我只想切换到下一个父行，但只显示一个父行的所有子行。

这里是代码-

var table = $("<table class='table'>");
table.append($("<thead><tr><th scope='col'>col1</th><th scope='col'>col2</th><th scope='col'>col3</th><th scope='col'>col4</th><th scope='col'>col5</th></tr><thead/>"));
for (var j = 0; j < 2; j++) {
  var row = $('<tbody><tr class="parent_row" >' + '<td>' + "1" + '</td>' + '<td>' + "2" + '</td>' + '<td>' + "3" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "" + '</td></tr><tbody/>');

  table.append(row);
  //child row
  for (var i = 0; i < 2; i++) {
    var row = $('<tr style="display: none">' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "4" + '</td>' + '<td>' + "5" + '</td></tr>');


    table.append(row);


    $("#table").html(table);
    $("#table").show();
    $('.parent_row').on("click", function(e) {
      e.preventDefault();
      $(this).closest('.parent_row').nextUntil('.parent_row').toggle();
    })
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">

</table>

对于每个父行，我想切换最初设置为不显示的子行，在这种情况下，每个父行有2行，但第一个父行获取所有子行，而下一个父行获取所有子行] >

我有一个表，并且给每个父行一个类。我只想切换到下一个父行，但只显示一个父行的所有子行。这是代码变量表= ...

Answer 1

您附加行的方式是错误的。我已经更新了代码以正确附加行。