Dynamisch erstellte Tabelle wird nach dem Entfernen nicht mehr angezeigt

Question

Hallo Ich stehe vor einem Problem, das so klein ist, aber kann es nicht machen.Ich habe eine Master-Tabelle, wo ich einige Header- und Spaltendaten nahm und diese Daten in einer anderen dynamisch erstellten Tabelle binden Es funktioniert gut. Aber das Problem ist, wenn ich die dynamisch generierte Tabelle entferne und versuche es erneut zu erstellen, wie ich es getan habe, bevor es nicht funktioniert.

Mein Jquery-Code ist wie unten

$('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(); 
}); 

Eine Arbeits Geige mit vollständigem Code unten hinzugefügt wird

Live Fiddle Demo

Answer 1

Try this:

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

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

}); 

In Ihrer einreichen Funktion Ihres Hinzufügen der Zeilen in thead und tbody. Und in Clear-Funktion löschen Sie die komplette Tabelle einschließlich thead und tbody.

Also müssen Sie diese Tag auch verhindern und müssen die HTML innerhalb von thead und tbody nur löschen.

Here is the updated fiddle

Answer 2

Wenn Sie klar table2 Sie die <thead> und das <tbody> Element entfernen. Irgendwie funktioniert der Submit Button nicht mehr.

Sie können dies versuchen:

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

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

}); 

Answer 3

Hier können Sie mit einer Lösung gehen 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>

Nur Code $("#table2").find('thead').empty().siblings('tbody').empty(); auf Taste & klar Absenden-Button.

Wenn Sie den Code nicht fügen Sie Schaltfläche einreichen, dann wird es zu hinzugefügt tr & td-table2 fortzusetzen.

Hoffe, das wird Ihnen helfen.