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通过clone方法实现所需的功能，然后删除嵌入的PHP代码。

在这里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而复制它们。而且，不要紧记点击处理程序与此元素相关联，从而带来任何意想不到的后果。

Answer 2

您选择的php代码将不会执行：

<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>

您需要制作一个api并从服务器获取数据。

在第一次加载时，它可以在服务器上执行php并生成html响应并将其发送到浏览器。但是通过使用javascript添加元素将无法执行php代码。

使用javascript复制表格行时未显示输入字段

2 个答案: