1

我有一张桌子，我给每个父行上课。我只想切换到下一个父行，但它只显示一个父行的所有子行。

这是代码-

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 行，但获取第一个父行的所有子行，下一个父行没有

4

1 回答 1

1

您附加行的方式是错误的，这就是为什么您看到第一个父行有 4 行，而第二个父行看到 0。我已更新代码以正确附加行。

下面代码中发生的事情是：创建父行，然后将子行附加到父行上。将子行附加到最新的 parent_row 后，将父行附加到表中。这个过程用外部 for 循环重复 2 次

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

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

  table.append(row);
}

// attach table after the loop is done, show table and attach listener
$("#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>

于 2019-12-12T17:09:57.393 回答