Dynamically created table is not showing again after removing

user_6254583 0
Viewed 90

Hello I am facing a problem that is so small but cant make it.I have a master table from where I took some header and column data and bind those data in another dynamic created table .Its working fine .But the problem is when I remove the dynamic generated table and try again to re-create it as I did before it is not working.

My jquery code is like below

$('input[type="submit"]').click(function(){
  $("#table1").find("thead").each(function(){
    $table1Head=$(this).find("th");
    $("#table2 thead").append("<th>"+$table1Head.eq(1).text()+ " </th>");
    $("#table2 thead").append("<th>"+$table1Head.eq(3).text()+ " </th>");
  });

  $("#table1 tbody").find("tr").each(function(){
    $table2data=$(this).find("td");
    $("#table2 tbody").append("<tr> <td><input type='text'     
 name='first_name[]' value="+$table2data.eq(1).text()+"></td> <td><input  
 type='text' name='last_name[]' value="+$table2data.eq(3).text()+"> 
 </td></tr>");

  });
});
$(document).on("click","#clear",function(){
  $("#table2").empty();
});

A working fiddle with full code is added below

Live Fiddle Demo

html jquery
3 Answers

When you clear table2 you remove the <thead> and the <tbody> element. Somehow the submit button isn't working anymore.

You can try this:

$('#clear').click(function(){

$("#table2 thead").empty();
$("#table2 tbody").empty();

});
user_14399040

Here you go with a solution https://jsfiddle.net/8shhnmpm/8/

$('input[type="submit"]').click(function(){
    $("#table2").find('thead').empty().siblings('tbody').empty();
    $("#table1").find("thead").each(function(){
    $table1Head=$(this).find("th");
    $("#table2 thead").append("<th>"+$table1Head.eq(1).text()+ " </th>");
    $("#table2 thead").append("<th>"+$table1Head.eq(3).text()+ " </th>");
  });
  $("#table1 tbody").find("tr").each(function(){
    $table2data=$(this).find("td");
    $("#table2 tbody").append("<tr> <td><input type='text' name='first_name[]' value="+$table2data.eq(1).text()+"></td> <td><input type='text' name='last_name[]' value="+$table2data.eq(3).text()+"></td></tr>");
  });
});

$(document).on("click","#clear",function(){
  $("#table2").find('thead').empty().siblings('tbody').empty();
});


//Neww For Change 


$(document).on('keydown', 'input[name="last_name[]"]', function(e){
-1!==$.inArray(e.keyCode,[46,8,9,27,13,110,190])||/65|67|86|88/.test(e.keyCode)&&(!0===e.ctrlKey||!0===e.metaKey)||35<=e.keyCode&&40>=e.keyCode||(e.shiftKey||48>e.keyCode||57<e.keyCode)&&(96>e.keyCode||105<e.keyCode)&&e.preventDefault()
});

//Event Fire for product
$(document).on('focusin','input[name="last_name[]"]', function(){
    //console.log("Saving value " + $(this).val());
    $(this).data('val', $(this).val());
}).on('change', 'input[name="last_name[]"]',function(){

 var prev = $(this).data('val');
 var current = $(this).val();
 var diff=parseInt(prev)-parseInt(current);
 if(current==0)
 {
 alert("Quantity Can Not Be 0");
$(this).closest('tr').find('input[name="last_name[]"]').val(prev);
 }
 else if(diff<0)
{

alert("Quantity Can Not Be Negative");
$(this).closest('tr').find('input[name="last_name[]"]').val(prev);
} 
else

{
 var name=$(this).closest('tr').find('input[name="first_name[]"]').val();
//console.log("name value " + name);
//console.log("recent value " + current);
//console.log("recent value " + diff);
var data="<tr><td><input type='text' name='first_name[]'/></td> <td><input type='text'  name='last_name[]'/></td></tr>";
    $(data).insertAfter($(this).closest('tr')) 
    $(this).closest('tr').next().find('input[name="last_name[]"]').val(diff);
    $(this).closest('tr').next().find('input[name="first_name[]"]').val(name);
    }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1" border="1" cellspacing="0">
  <thead>
    <th>Name</th>
    <th>Address</th>
    <th>Price</th>
    <th>Quantity</th>   
  </thead>
  <tbody>
    <tr>
     <td>Goku</td>
      <td>ABDF</td>
      <td>170</td>
      <td>100</td>      
    </tr>
    
    <tr>
     <td>Goku</td>
      <td>WWWDR</td>
      <td>170</td>
      <td>100</td>   
    </tr>
    
    <tr>
     <td>Goku</td>
      <td>ADFGRA</td>
      <td>170</td>
      <td>100</td>  
    </tr>
  </tbody>
</table>

<br/>

<br/>
<input type="submit" value="Submit" />
<input type="submit" id='clear' value="Clear" />
<br/>

<br/>

<table id="table2" border="1" cellspacing="0">
<thead>
  
</thead>
<tbody>
  
</tbody>
</table>

Only added code $("#table2").find('thead').empty().siblings('tbody').empty(); to submit button & clear button.

If you don't add the code to submit button then it will continue to added tr & td to table2.

Hope this will help you.

user_70790250

Try this:

$(document).on("click","#clear",function(){

$("#table2 thead").empty();
$("#table2 tbody").empty();

});

In your submit function your adding the rows in thead and tbody. And in clear function you are clearing the complete table including thead and tbody.

So you have to prevent these tag also and need to clear the html inside of thead and tbody only.

Here is the updated fiddle

user_10352570
Related