动态添加列到 html 表并将输入发送到数据库

Question

我有一个 HTML 表单的表格，其中总列数取决于用户。单击按钮即可添加附加列。添加列附带的行应该是数组输入，一旦提交表单，这些行将被发送到 MySQL 数据库。

我是 javascript 和 jquery 的新手。我在互联网上进行了一些搜索，发现了很多“使用动态行/列创建 HTML 表”相关的内容，但它们都与动态列附带的行中的输入单元格并将它们发送到数据库相关。

我发现这个链接给了我一个先机，但我陷入困境：动态列 - Thinbug

在上图中，单击按钮时会添加“Bus1 kW”等列，在屏幕截图中包含该按钮只会使图像不必要地变长。所有添加列的行都应该是输入字段，我可以更改这些字段的值的原因是我启用了“内容可编辑”。我尝试添加数组形式的输入字段，但是当我这样做时，添加列的按钮停止工作。

如何使动态列附带的行将输入字段作为数组，以便我可以在 PHP 中访问它们？如何添加此：<input type="text"  required="required"   name="Bus1_kW[]">到动态列附带的行，以便列的所有行都将“Bus1 kW”存储在一个数组中，当我提交表单时，我可以在 PHP 中访问该数组？

这是生成上面图像的脚本代码（jquery）：

<script type="text/javascript"> 

            var i = 1;

      

       // This part works fine  

       $("#addColumn").click(function () {

            

                $("tr:first").append("<td>Bus"+i+" kW</td>");

                $("tr:not(:first)").append("<td contenteditable="+true+"> </td>");

            

            i = i+1;

        });            

        

        

    </script>

这是我试图做的，但它不起作用：

<script type="text/javascript"> 

            var i = 1;

        // This is what I tried to do but it's not working

        $("#addColumn").click(function () {

            

                $("tr:first").append("<td>Bus"+i+" kW</td>");

                $("tr:not(:first)").append("<input type="+text+" required="+required+" name="+"Bus"+i+"_kW[]"+">");

            

            i = i+1;

        });

        

        

    </script>

我将不胜感激任何解决方案/帮助，jquery 或 javascript，我刚刚接触 javascript，不知道哪个是首选以及为什么在 javascript 和 jquery 之间。感谢您的时间

Answer 1

添加行的按钮不应位于结束标记之间</tbody>，</table>因为这是无效的 HTML。我刚刚把它移到了桌子前面。<td>我通过添加输入字段的周围并将所有静态内容（文本和必需）移动到正确的位置来调整append（）函数，因为文本和必需不是变量。&nbsp; &nbsp;var i = 1;&nbsp; &nbsp;$("#addColumn").click(function() {&nbsp; &nbsp; &nbsp;$("tr:first").append("<td>Bus" + i + " kW</td>");&nbsp; &nbsp; &nbsp;$("tr:not(:first)").append("<td><input type='text' required='required' name='Bus" + i + "_kW[]'></td>");&nbsp; &nbsp; &nbsp;i = i + 1;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id="addColumn">Add Column</button><table id="busDataTable" class="form-group-sm" border="1">&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>Interval Number</th>&nbsp; &nbsp; &nbsp; <th>Time Interval (30min)</th>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; <td>0</td>&nbsp; &nbsp; </tr> <!-- -->&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>2</td>&nbsp; &nbsp; &nbsp; <td>0.5</td>&nbsp; &nbsp; </tr> <!-- -->&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>3</td>&nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; </tr> <!-- -->&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>4</td>&nbsp; &nbsp; &nbsp; <td>1.5</td>&nbsp; &nbsp; </tr> <!-- -->&nbsp; &nbsp; <!-- Table rows continue until 48 rows -->&nbsp; </tbody>&nbsp;</table>