javascript - 使用 javascript 复制表行时不显示输入字段

Question

我正在处理使用 javascript 复制表格行的表格问题是当我单击添加更多按钮然后复制表格行但输入字段未显示此处是我的表格代码

<table class="striped display" cellspacing="0" width="100%" id="myTable">
  <tbody>
    <tr>
       <td class="input-field col s2">
       <label>Module</label>
          <select  data-rel="chosen" name="moduleid[]" class="form-control">
              <?php 
                $RowRes=mysqli_query($con,"Select id, name from tbl_module where status=1 order by id asc");
                while($URow=mysqli_fetch_array($RowRes)){
                echo "<option value=".$URow[0].">".$URow[1]."</option>";}?>
          </select>                 
        </td>
        <td class="input-field col s2">
           <label>Week Days</label>
             <select id="week_days" data-rel="chosen" name="week_days[]" class="form-control" multiple="multiple">
              <option value="1">Monday</option>
              <option value="2">Tuesday</option>
              <option value="3">Wednesday</option>
              <option value="4">Thursday</option>
              <option value="5">Friday</option>
             </select>
          </td>
      <td><button type="button" name="add" id="more_btn" class="btn right">Add More</button></td>
     </tr>
</tbody>

这里是 javascript 代码，在单击按钮时附加一个表格行

<script type="text/javascript">
$(document).ready(function() {
var i=1;
$('#more_btn').click(function() {
    i++;
   $('#myTable tbody').append('<tr id="row'+i+'"><td class="input-field col s2"><label>Module</label><select data-rel="chosen" name="moduleid[]" class="form-control"><?php$RowRes=mysqli_query($con,"Select id, name from tbl_module where status=1 order by id asc");while($URow=mysqli_fetch_array($RowRes)){echo "<option value=".$URow[0].">".$URow[1]."</option>";}?></select></td><td class="input-field col s2"><label>Week Days</label><select  data-rel="chosen" name="week_days[]" class="form-control" multiple="multiple"><option value="1">Monday</option><option value="2">Tuesday</option><option value="3">Wednesday</option><option value="4">Thursday</option><option value="5">Friday</option></select></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');

   $('.btn_remove').click(function(){ 
       var button_id = $(this).attr("id");   
       $('#row'+button_id+'').remove();  
  });
});

});

这是问题 的图像

看到第一行表格输入字段工作正常，但是当点击添加更多按钮输入字段时复制的第二行表格输入字段不工作

Answer 1

您可以只使用 JQuery 通过克隆方法实现您想要的，并删除嵌入的 PHP 代码。

可以在这里找到一个简单的 fiddle https://jsfiddle.net/xpvt214o/809590/仅更新主 <tr> 的 ID本身。但是代码看起来如下:

       $(document).ready(function() {
var i=1;
$('#more_btn').click(function() {
    i++;
    $clone = $('#first').clone(true);
    $clone.attr('id', "row" + i);

    $clone.find('.btn_remove').attr('data-remove-id', 'row'+i);
   $('#myTable tbody').append($clone);


});

$('#myTable').on('click','.btn_remove',function(){ 
       var button_id = $(this).data("remove-id");  
       $('#'+button_id+'').remove();  
  });

});

唯一id我在这里操作的是表行本身的 ID。但是使用 jQuery 选择器，您可以更改任何克隆元素的 ID 等。

我确实怀疑您当前的代码不会按预期工作，因为即使在您的示例中所有表单输入都具有相同的名称(您似乎只更新了表格行的 ID)。您可能希望通过附加 i 使表单名称本身更具动态性。别处。但这显然是一个不同的问题。

您可能还想考虑在所有表单的底部只设置一个“添加更多”按钮，而不是复制它，因为它们都有相同的 id。以及。您不希望以任何意想不到的后果结束，请记住点击处理程序与该元素相关联。