我有一個 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 之間。感謝您的時間
1 回答
鴻蒙傳說
TA貢獻1865條經驗 獲得超7個贊
添加行的按鈕不應位于結束標記之間</tbody>，</table>因為這是無效的 HTML。我剛剛把它移到了桌子前面。<td>我通過添加輸入字段的周圍并將所有靜態內容（文本和必需）移動到正確的位置來調整append（）函數，因為文本和必需不是變量。
var i = 1;
$("#addColumn").click(function() {
$("tr:first").append("<td>Bus" + i + " kW</td>");
$("tr:not(:first)").append("<td><input type='text' required='required' name='Bus" + i + "_kW[]'></td>");
i = i + 1;
});
<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">
<tbody>
<tr>
<th>Interval Number</th>
<th>Time Interval (30min)</th>
</tr>
<tr>
<td>1</td>
<td>0</td>
</tr> <!-- -->
<tr>
<td>2</td>
<td>0.5</td>
</tr> <!-- -->
<tr>
<td>3</td>
<td>1</td>
</tr> <!-- -->
<tr>
<td>4</td>
<td>1.5</td>
</tr> <!-- -->
<!-- Table rows continue until 48 rows -->
</tbody>
</table>
- 1 回答
- 0 關注
- 151 瀏覽
添加回答
舉報
0/150
提交
取消