javascript - 如何使用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

您需要更改类名称，您在其中处理点击事件并需要更新切换代码$(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>