動的に作成されたテーブルが削除後に再び表示されない

Question

こんにちは私は小さな問題ですが、それはできません。私はいくつかのヘッダーと列のデータを取り込んだマスターテーブルを持っていて、 .Itはうまく動作します。しかし、問題は、ダイナミックに生成されたテーブルを削除し、それが動作しない前に再作成しようとしたときです。

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

の下に完全なコードで作業フィドルが、このお試しください

Live Fiddle Demo

Answer 1

の下に追加されるように

私のjqueryのコードは次のとおりです。あなたの提出機能で

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

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

}); 

をごtheadとに行を追加する。そして、明確な関数では、theadとtbodyを含む完全なテーブルをクリアしています。

これらのタグもまた防止しなければならず、theadとtbodyのhtmlを消去する必要があります。

Here is the updated fiddle

Answer 2

あなたはtable2明確にあなたが<thead>と<tbody>要素を削除します。どういうわけか、送信ボタンがもう機能していません。

あなたがこの試すことができます：

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

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

}); 

Answer 3

ここでは、ソリューション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>

に行くにのみボタン&クリアボタンを提出するコード $("#table2").find('thead').empty().siblings('tbody').empty(); を追加しました。

送信ボタンにコードを追加しないと、tr & td〜table2が引き続き追加されます。

希望すると、これが役立ちます。