Question

您好我面临的问题是如此之小但无法实现。我有一个主表，我从中获取了一些标题和列数据并将这些数据绑定在另一个动态创建的表中。它工作正常。但问题是当我删除动态生成的表并再次尝试重新创建它时，就像我在它不工作之前所做的那样。

我的jquery代码如下所示

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

清除table2后，您删除了<thead>和<tbody>元素。不知何故，提交按钮不再有效。

你可以试试这个：

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

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

});

Answer 2

您可以使用解决方案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(); 提交按钮＆amp;清除按钮。

如果您未添加要提交按钮的代码，则会继续添加tr＆amp; td至table2。

希望这会对你有所帮助。

Answer 3

试试这个：

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

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

});

在提交功能中添加thead和tbody中的行。在明确的功能中，您将清除整个表格，包括thead和tbody。

因此您还必须阻止这些标记，并且只需清除thead和tbody内的html。

Here is the updated fiddle

删除后，动态创建的表不会再次显示

3 个答案: