javascript - 如何使用 JS、HTML、PHP 制作动态 "Add Dataset"功能？

Question

用例

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

我说set表示它可以是一行或一列6个数字。

问题

是否有我可以使用的现有模块，或者是否有任何我可以实现以使其更容易的模块？我的目标是

• 保持 HTML 简单
• 尽可能使用 native 网络堆栈实现(GET、POST、FORM、DIV、TABLE)
• 但使​​用 Web 开发人员可用的工具(JS、JQUERY、SESSION、AJAX、PHP 后端数据生成等)

我尝试过的:

我决定为每组数据使用列，但这让我遇到了一些麻烦——我必须使用 HTML 技巧，如 tabindex 来保持表单导航的一致性。我无法添加新集，我不确定如何删除集。我当然可以最终弄清楚这一点，但我认为我开始时走错了方向。我想备份并设计一个不同的界面，让我在达到上述用例目标的同时保持简单。我的尝试如下..

//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 机制提交。并且该表格也必须在操作之间保持一致。

Answer 1

我会做以下事情:

设计:我会用 <div>元素来创建你的表。 table这种表格的结构在视觉上很好，但在涉及动态操作和响应能力时却很难使用。

Action :

• 添加 - 要添加新集合，我会在您的表格顶部添加一个链接，上面写着“添加集合”之类的内容，单击该链接时(当然是在 Javascript 中)，您将计算当前集合，获取最后一个数字，并创建你的 input以名称具有与当前集合匹配的键的数组的方式，如下所示:<input tabindex="1" name="case['+ count +']" size="3" type="text">其中 count是你当前集合的总数加 1。

• 删除 - 每个集合的每一列下方都有一个删除图标，这将设置一个标志，以便在提交时将其从数据库中删除。在视觉上，我会将集合变灰，以表明它已“标记为删除”(此操作应该能够撤消)。

• 提交 - 当您准备好提交时，您可以通过 AJAX 或仅通过 POST 请求来执行此操作。您的帖子数据将包含带有新信息的任何新集或旧集。每组都有一个标志，上面写着 update , eidt , new .. 然后您可以使用这些标志在您的后端采取适当的操作。

希望这对您有所帮助。