表格中表格的动态行

Question

我正在尝试创建一个可以根据需要动态地向表中添加更多行的表单。在我将发布的示例中，您将看到一个关于伴侣的表。因为，我们不知道每个学校会带来多少陪伴者需要动态。我正在尝试使用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="john.doe@email.com" 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="john.doe@email.com" 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/

Answer 1

JavaScript区分大小写：document.getElementByID无效。将其替换为document.getElementById，它可以解决您的问题。

另外，作为提示，请务必检查浏览器控制台中的任何错误或警告消息......这样可以更轻松地调试前端方式。