CODEWITHSUNDEEP
jquery
Abhay Singh
Abhay Singh

Reputation: 437

how to toggle until next parent row using jquery?

I have a table and I have give a class to each parent row . I want to toggle only upto next parent row but it is showing all the child rows for one parent row only.

Here is the code-

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>

For each parent row , i want to toggle child rows which are intially set to display none, in this case there are 2 rows for each parent row but getting all the child rows for first parent row and getting none for next parent row

Upvotes: 1

Views: 97

Answers (1)

Huangism
Huangism

Reputation: 16448

The way you are attaching the rows is wrong which is why you see 4 rows for the first parent row and 0 for the second. I have updated the code to attach the rows properly.

What's happening in the code below is: create the parent row, then attach the child rows on the parent row. After the child rows has been attached to the newest parent_row, then append the parent row to the table. This process repeats 2 times with the outer for loop

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>

Upvotes: 1

Related Questions