如何使用 JS、HTML、PHP 制作动态的“添加数据集”功能？答案

【问题标题】：How to make a dynamic "Add Dataset" functionality using JS, HTML, PHP?如何使用 JS、HTML、PHP 制作动态的“添加数据集”功能？
【发布时间】：2015-11-03 22:30:39
【问题描述】：

用例

用户需要输入多组数据。每个数据是一组 6 个数字。通常有 10 到 15 个这样的集合，但最多可达 40 个。用户需要能够动态添加新集合或提前指定集合的数量。之后还需要能够编辑集合中的数据，删除一些集合并可能添加一些集合。并能够将整个数据保存到服务器。换句话说，动态的类似 excel 的功能，但在网络上。

我说set表示它可以是一行或一列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>

我目前的方向有问题

无法添加新集
很难删除一个集合

虽然可以完成更改表格以进行上述工作所需的操作是不可行的（会使事情变得太复杂），所以我寻求新的方向。一种让前端和后端都变得简单的方法。

我所说的简单 HTML 的意思是最终结果（在对集合进行多次添加/删除/编辑操作之后）应该是一个简单的form，可以通过标准的 HTML 或 JS 机制提交。并且这种形式也必须在操作之间保持一致。

【问题讨论】：

即使表格使它们变得很好，甚至，它们并不适合您想要实现的目标。我会改用<div> 元素，这样您就可以在不影响表格其余部分的情况下抓取列。
为行交换列会让事情变得更容易 - 添加/删除你只需克隆/删除一行。标签索引也可以解决问题

标签： javascript php html ajax dynamic

【解决方案1】：

我会做以下事情：

设计： 我会使用<div> 元素来创建您的表格。 table 结构在视觉上很适合此类表格，但在动态操作和响应性方面很难使用。

操作：

添加 - 要添加新集合，我会在表格顶部添加一个链接，上面写着“添加集合”之类的内容，单击时（当然是在 Javascript 中），您将计算当前集合，获取最后一个数字，并创建您的input，其中名称具有与当前集合匹配的键的数组，如下所示：<input tabindex="1" name="case['+ count +']" size="3" type="text"> 其中count 是您当前集合的总数加 1。
删除 - 每组在每列下方都有一个删除图标，该图标将设置一个标志，以便在提交时将其从数据库中删除。从视觉上看，我会将集合变灰，以表明它已“标记为删除”（此操作应该可以撤消）。
提交 - 当您准备好提交时，您可以通过 AJAX 或仅通过 POST 请求来完成。您的帖子数据将包含带有新信息的任何新集或旧集。每个集合都有一个标志，上面写着update、eidt、new.. 然后您可以使用这些标志在您的后端采取适当的行动。

希望这会有所帮助。

【讨论】：