表格中表格的动态行答案

【问题标题】：Dynamic Rows for Table in a Form表格中表格的动态行
【发布时间】：2018-01-15 01:23:24
【问题描述】：

我正在尝试创建一个可以根据需要向表中动态添加更多行的表单。在我将发布的示例中，您将看到一个伴侣表。因为，我们不知道每所学校会带来多少监护人，所以需要保持活力。我正在尝试使用 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/

【问题讨论】：

应该是document.getElementById("chp")

标签： javascript forms dynamic html-table

【解决方案1】：

JavaScript 区分大小写：document.getElementByID 不起作用。将其替换为document.getElementById，它应该可以解决您的问题。

另外作为提示，请务必检查浏览器控制台中的任何错误或警告消息...它使调试前端的方式更容易。

【讨论】：