如何使用JS，HTML，PHP創建動態“添加數據集”功能？

Question

用例

用戶需要輸入多組數據。 每個數據是一組6個數字。 通常有10到15個這樣的集合，但最多可以達到40個。用戶需要能夠動態添加新集合或提前指定集合數量。 還需要能夠在之后編輯集合中的數據，刪除一些集合並可能添加一些集合。 並能夠將整個數據保存到服務器。 換句話說，動態類似於Excel的功能，但在網絡上。

我說設置表示它可以是6行數的行或列。

題

是否有我可以使用的現有模塊，或者我可以實現哪些模塊以使其更容易？ 我的目標是

• 保持HTML簡單
• 盡可能使用本機Web堆棧實現（GET，POST，FORM，DIV，TABLE）
• 但是使用Web開發人員可用的工具來簡化生活（JS，JQUERY，SESSION，AJAX，PHP后端數據生成等）

我嘗試過的：

我已決定為每組數據使用列，但這讓我遇到了麻煩 - 我必須使用像tabindex這樣的HTML技巧來保持表單導航的一致性。 我無法添加新的設置，我不知道如何刪除設置。 我當然可以最終解決這個問題，但我認為我已經開始走錯了方向。 我想備份並設計一個不同的界面，讓我在實現上述用例目標的同時保持簡單。 我的嘗試在下面..

 //some JS functionality to keep in mind as an example var form = document.forms.my_form, elem = form.elements; elem.my_button.onclick = function() { alert('Selected Column: ' + elem.design.value); }; 

 <form name="my_form"> <table> <tbody> <tr> <th>Condition</th> <th></th> <th>Case 1</th> <th>Case 2</th> <th>Case 3</th> <th>Case 4</th> </tr> <tr> <td>Quantity 1</td> <td class="c">-</td> <td class="c"> <input tabindex="1" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="7" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="13" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="19" name="case[]" size="3" type="text"> </td> </tr> <tr> <td>Pressure</td> <td class="c">-</td> <td class="c"> <input tabindex="2" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="8" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="14" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="20" name="case[]" size="3" type="text"> </td> </tr> <tr> <td>Vacuum</td> <td class="c">-</td> <td class="c"> <input tabindex="3" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="9" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="15" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="21" name="case[]" size="3" type="text"> </td> </tr> <tr> <td>Quantity 4</td> <td class="c">-</td> <td class="c"> <input tabindex="4" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="10" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="16" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="22" name="case[]" size="3" type="text"> </td> </tr> <tr> <td>Temp</td> <td class="c">-</td> <td class="c"> <input tabindex="5" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="11" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="17" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="23" name="case[]" size="3" type="text"> </td> </tr> <tr> <td>Solids</td> <td class="c">-</td> <td class="c"> <input tabindex="6" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="12" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="18" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="24" name="case[]" size="3" type="text"> </td> </tr> <tr> <td></td> <td>Main</td> <td class="c"> <input name="design" value="1" checked="checked" type="radio"> </td> <td class="c"> <input name="design" value="2" type="radio"> </td> <td class="c"> <input name="design" value="3" type="radio"> </td> <td class="c"> <input name="design" value="4" type="radio"> </td> </tr> <tr> <td colspan="6"> <input type="button" name="my_button" value="get column number" /> </td> </tr> </tbody> </table> </form> 

我目前的方向存在問題

1. 無法添加新集
2. 刪除一組很難

雖然可以做到改變表格以進行上述工作所需的操作是不可行的（會使事情變得太復雜），因此我尋求新的方向。 一個可以簡化前端和后端的一個。

我的意思是簡單的HTML是最終結果（在集合上多次添加/刪除/編輯操作之后）應該是一個可以通過標准HTML或JS機制提交的簡單form 。 並且該形式也必須在操作之間保持一致。

Answer 1

我會做以下事情：

設計：我會使用<div>元素來創建你的表。 table結構對於這樣的表在視覺上很好，但是當涉及到動態操作和響應時，它們很難處理。

操作：

• 添加 - 添加新集，我會在表格的頂部添加一個鏈接，例如“添加集”，當點擊時（當然是在Javascript中），您將計算當前集，獲取最后一個數字，並以一種方式創建input ，其中名稱具有與當前集匹配的鍵的數組，如下所示： <input tabindex="1" name="case['+ count +']" size="3" type="text">其中count是當前集合的總數加1。

• 刪除 - 每個列的每個列下面都有一個刪除圖標，它將設置一個標志，以便在提交時從數據庫中刪除它。 在視覺上，我會將該組灰顯，以顯示它“標記為刪除”（此操作應該可以撤消）。

• 提交 - 當您准備提交時，您可以通過AJAX或僅通過POST請求來執行此操作。 您的帖子數據將包含任何新集或舊集與新信息。 每個集合都有一個標志，表示update ， eidt ， new ..然后你可以使用這些標志在你的后端采取適當的行動。

希望這可以幫助。