Question

使用案例

用户需要输入多组数据。每个数据是一组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机制提交。并且该形式也必须在操作之间保持一致。

Answer 1

我会做以下事情：

<强>设计我会使用<div>元素来创建表格。 table结构对于这样的表在视觉上很好，但是当涉及动态操作和响应时，它们很难处理。

操作

添加 - 要添加新的集合，我会在表格的顶部添加一个链接，例如“添加集”，当点击时（当然是在Javascript中），您将计算当前集合，获取最后一个数字，然后以名称包含与当前集匹配的键的数组的方式创建input，如下所示：<input tabindex="1" name="case['+ count +']" size="3" type="text">其中count是总数你当前的套装加1。

删除 - 每个列的每个列下面都有一个删除图标，它会设置一个标志，以便在提交时从数据库中删除它。在视觉上，我会将该组灰显，以显示它已“标记为删除”（此操作应该可以撤消）。

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

希望这有帮助。

如何使用JS，HTML，PHP创建动态的“添加数据集”功能？

1 个答案: