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

我正在使用表，其中使用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();  
  });
});

})；

这是问题的图像

---

请注意，第一行表格输入字段工作正常，但单击“添加更多”按钮时复制的第二行表格输入字段不工作。在您的选择中，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代码。

您可以使用JQuery通过clone方法实现所需的功能，并删除嵌入的php代码

在这里可以找到一个简单的提琴，它只更新了main本身的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。而且，您不希望以任何意外的结果结束，记住单击处理程序与该元素关联。

哪个部分不起作用？你有没有试过把你要插入的内容一块一块地删减，然后再添加回来？示例：1，2，…仔细阅读我的问题，然后你就知道什么部分不起作用了。这是一个调试技巧，真的。当我的代码无法工作时，我会去掉更改并重新构建它，直到我看到引入错误的地方。正如其他人所说，您正试图在javascript代码中执行PHP代码以添加新行。php代码在服务器端呈现一次，它不会在每次使用javascript函数时再次运行，因为输出已经呈现。如果php只需要呈现一次，那么我猜您可能会因为引号的开头/结尾而出现javascript错误。您的控制台是否显示任何javascript错误？是的，您可以，我注意到您正在使用jquery，所以请看一下clone方法。然后，您可以根据需要将克隆副本中的ID等更新为增量感谢支持。。您可能认为使用javascript添加元素将无法执行php代码。我没有php的代码也不能工作。再见，我的问题是更新了，我没有投反对票。我也不能。ATLESE 125声誉需要以负数投票。感谢您的支持。。您的代码是正确的，但不适用于我的side@Arslan见TommyBs先生补充了一个有帮助的答案。我想：谢谢你，它工作得很好，但有一点问题是，我在点击它时添加了删除按钮，然后删除了表行。我对代码进行了一些编辑，以说明这应该如何工作。但任何进一步的信息都应该是一个新问题。但是我建议你先花点时间尝试/理解它，以便尝试和提高你自己，巩固你的知识。非常感谢。。我对移除按钮感到困惑，我的问题中遗漏了它。请在这方面帮助我代码和小提琴现在显示删除按钮。但请不要盲目地复制和粘贴。花些时间去了解它在做什么，并试着去理解它。如果这篇文章解决了你的问题，请点击勾号接受。