2017-08-07 147 views
0

我正在尝试创建一个可以根据需要动态地向表中添加更多行的表单。在我将发布的示例中,您将看到一个伴侣表的表格。因为,我们不知道每个学校会带来多少伴侣,因此需要充满活力。我正在尝试使用Javascript来创建一个onclick按钮,它将在表中添加一个新行并将这些名称存储为一个数组,以便它可以发送POST和使用PHP进行分析,然后存储到数据库中。我在网上找到了一个解决方案,但是当我尝试在我的网站上实现它时,一旦单击按钮,就没有任何工作。也许我只需要另一双眼睛来看看它是否需要任何东西。动态行以表格的形式

     <table id="chp" class="table table-striped"> 
 
         <tr> 
 
          <th class="text-center">First Name</th> 
 
          <th class="text-center">Last Name</th> 
 
          <th class="text-center">Phone</th> 
 
          <th class="text-center">Email</th> 
 
          <th class="text-center"> + </th> 
 
         </tr> 
 
         <tr> 
 
          <td><input id="chpFirst" name="chpFirst" type="text" placeholder="John" class="form-control input-md" required=""></td> 
 
          <td><input id="chpLast" name="chpLast" type="text" placeholder="Doe" class="form-control input-md" required=""></td> 
 
          <td><input id="chpPhone" name="chpPhone" type="text" placeholder="5555555555" class="form-control input-md" required=""></td> 
 
          <td><input id="chpEmail" name="chpEmail" type="text" placeholder="[email protected]" class="form-control input-md" required=""></td> 
 
          <td><input type="button" id="more_fields" onclick="add_chp();" value="Add" class="btn btn-info" /></td> 
 
         </tr> 
 
        </table> 
 

 
    <script> 
 
    function add_chp() { 
 

 
     document.getElementByID("chp").insertRow(-1).innerHTML = '<tr>' + 
 
      '<td><input id="chpFirst" name="chpFirst[]" type="text" placeholder="John" class="form-control input-md" required=""></td>' + 
 
      '<td><input id="chpLast" name="chpLast[]" type="text" placeholder="Doe" class="form-control input-md" required=""></td>' + 
 
      '<td><input id="chpPhone" name="chpPhone[]" type="text" placeholder="5555555555" class="form-control input-md" required=""></td>' + 
 
      '<td><input id="chpEmail" name="chpEmail[]" type="text" placeholder="[email protected]" class="form-control input-md" required=""></td>' + 
 
      '<td><input type="button" id="more_fields" onclick="add_fields();" value="Add More" class="btn btn-info" /></td>' + 
 
      '</tr>'; 
 
    } 
 
</script>

https://jsfiddle.net/owk9ct13/

+0

它应该是'document.getElementById(“chp”)' – Dij

回答

0

JavaScript是大小写敏感的:document.getElementByID不会工作。将其替换为document.getElementById并且它应该解决您的问题。

同样作为一个提示,一定要检查浏览器控制台中的任何错误或警告消息......它使调试前端方式更容易。 Image of your error