CODEWITHSUNDEEP
javascriptjqueryhtml
Abhay Singh
Abhay Singh

Reputation: 437

How to toggle child rows on clicking + sign of parent row using jquery?

I want to toggle child rows on clicking + sign of parent row using jquery but I am not able to do that as when i click any where on parent row , child row toggles ,but i want to see the child rows only when + sign of parent row is clicked.

Here is the code-

 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..


 });
 });

full code- https://jsfiddle.net/gaurav10022/zgso4hj6/10/

Upvotes: 0

Views: 1174

Answers (2)

Vishal modi
Vishal modi

Reputation: 1720

you need to change the class name, where you are handling click event and need to update toggle code $(this).parent().nextAll().toggle();

try below solution.

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>

Upvotes: 1

Ram Segev
Ram Segev

Reputation: 2573

You should add the click event to details-control not to its parent, the find the parent and then the parent sibling

$('.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>

Upvotes: 0

Related Questions