Как переключать дочерние строки при нажатии + знак родительской строки с помощью jquery?

Question

Я хочу переключать дочерние строки при нажатии + знак родительской строки, используя jquery, но я не могу этого сделать, так как когда я щелкаю в любом месте родительской строки, дочерняя строка переключается, но я хочу видеть дочерние строки только тогда, когда+ нажимается знак родительской строки.

Вот код-

 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></th><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 class="details-control">' + '</td>' + '<td>'+ item.Message + '</td>' + '<td>' + item.name + '</td>' + '<td>' + item.id + '</td>' + '</td>' +      "" + '</td>' + '<td>' + "" + '</td></tr>');

 table.append(row);
 //child row
 for(var j=0; j<2; j++) {
 var row=$('<tr style="display: none"><td>' + "" + '</td>' + '<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..


 });
 });

полный код- https://jsfiddle.net/gaurav10022/zgso4hj6/10/

Answer 1

вам нужно изменить имя класса, где вы обрабатываете событие click, и вам нужно обновить код переключения $ (this) .parent (). NextAll (). Toggle ();

попробуйте решение ниже.

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></th><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 class="details-control">' + '</td>' + '<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>' + "" + '</td>' + '<td>' + item.col4 + '</td>' + '<td>' + item.col5 + '</td></tr>');
var row1=$('<tr style="display: none"><td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + item.col4 + '</td>' + '<td>' + item.col5 + '</td></tr>');

    table.append(row);
    table.append(row1);
    
     $("#table").html(table);
      $('.details-control').click(function() {
	   

			$(this).parent().nextAll().toggle();
})
     // Show table if it's not already visible..
     

   });
 });

@import url('//cdn.datatables.net/1.10.2/css/jquery.dataTables.css');
 td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}

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>

Answer 2

Вы должны добавить событие click к details-control, а не к его родителю, найти родителя, а затем родителя или сестру

$('.details-control').click(function(e) {
  $(this).closest('.parent_row').next('tr').toggle();
})

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></th><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 class="details-control">' + '</td>' + '<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>' + "" + '</td>' + '<td>' + item.col4 + '</td>' + '<td>' + item.col5 + '</td></tr>');
    table.append(row);

    $("#table").html(table);
    $('.details-control').click(function(e) {
      $(this).closest('.parent_row').next('tr').toggle();
    })
    // Show table if it's not already visible..


  });
});

@import url('//cdn.datatables.net/1.10.2/css/jquery.dataTables.css');
td.details-control {
  background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
  cursor: pointer;
}

tr.shown td.details-control {
  background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}

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>