How to show two html tables using different table id's?

Question

I want to display two html tables using different table id's. I am able to display one table but I am not able to display the second table and not figure it out where I am making error.

Code is given below:

var $container = $("#container");
 
 
 var $row = $("#container table tbody tr");

 // Loop through items in JSON data..
   var $button = $("<button>" + 'xyz' + "</button>");
   $container.prepend($button);
   var table = $("<table1>");
   table.append($("<tr><th>column1</th><th>column2</th></tr>"));
          
	 // Button click handler..
   $button.on("click", function(e) {
   e.preventDefault();
   for( var i=0; i<2; i++) {
     
     // Replace row HTML..
     //parent row
     var row=$('<tr ><td>' + 'data' + '</td>' +  + '<td>' + "" + '</td></tr>');
     
     table.append(row);
     
     for(var j =0; j<2; j++) {
     
     var row=$('<tr><td>' + "" + '</td></tr>');
     $('<td>data</td>')
          .on('click', function() { 
          //I want to display table2 when clicked on col2 data
          
          var table = $("<table2>");
   
          table.append($("<tr><th>col1</th><th>col2</th></tr   >"));
          var row=$('<tr><td>' + 'data' + '</td>' +  + '<td>' + "" + '</td></tr>');
          table.append(row);
          
          })
          .appendTo(row);
          table.append(row);
          $("#table2").html(table);
     }
 }    
     
    
     $("#table1").html(table);
   


     // Show table if it's not already visible..
     

   });

#table2 {
   margin-top: 20px;
   border-collapse: collapse;
   border: 1px solid silver;
   width: 500px;
 }


#table1 {
   margin-top: 20px;
   border-collapse: collapse;
   border: 1px solid silver;
   width: 500px;
 }

#table1 th {
   border: 1px solid black;
   text-align: left;
 }
#table1 td {
  border: 1px solid black;
  text-align: left;
  }
#table1 tr {
  background-color: #f2f2f2;
  }
  
 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="table1">
   </div>

 </div>
 
   <div id="table2">
   </div>

I want to show second table when i click on values of column2. Kindly guide me how to fix this issue. Here is the full code- https://jsfiddle.net/gaurav10022/styjk9vr/48/

Answer 1

You should first append the table column values after that apply click event on the last column.

Try below code or go through JSFiddle

var $container = $("#container");
var m = ['data','data1'];

// Loop through items in JSON data..
var $button = $("<button>" + 'xyz' + "</button>");
$container.prepend($button);
var table = $("<table>");
table.append($("<tr><th>column1</th><th>column2</th></tr>"));

// Button click handler..
$button.on("click", function(e) {
  e.preventDefault();
  for (var i = 0; i < 2; i++) {

    // Replace row HTML..
    //parent row
    var row = $('<tr ><td>' + 'data' + '</td><td>' + "" + '</td></tr>');

    table.append(row);

    for (var j = 0; j < 2; j++) {
      //child row
      var row = $('<tr><td>' + "" + '</td><td>' + m[j] + '</td></tr>');
      $(row).find('td:last').on('click', function() {
        // second table
        var tempData = $(this).text();
        var table2 = $("<table>");

        table2.append($("<tr><th>col1</th><th>col2</th></tr   >"));
        var row = $('<tr class="parent_row" ><td>' + tempData + '</td>' + +'<td>' + "" + '</td></tr>');
        table2.append(row);
        $("#table2").html(table2);
      })
      table.append(row);
    }
  }


  $("#table1").html(table);



  // Show table if it's not already visible..


});

#table2 {
  margin-top: 20px;
  border-collapse: collapse;
  border: 1px solid silver;
  width: 500px;
}

#table1 {
  margin-top: 20px;
  border-collapse: collapse;
  border: 1px solid silver;
  width: 500px;
}

#table1 th {
  border: 1px solid black;
  text-align: left;
}

#table1 td {
  border: 1px solid black;
  text-align: left;
}

#table1 tr {
  background-color: #f2f2f2;
}

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="table1">
  </div>

</div>

<div id="table2">
</div>