从包含输入字段作为其数据的表中检索输入字段的值？

Question

场景：

• 我有一个包含输入字段的表，输入字段的数量不是固定的，它可以是任意数量，因为每次都会根据用户从数据库中获取的数据来呈现该表。

• 因此，每个表都被渲染，表的每一行都有5个输入字段 为：

       <input name="t-1">
       <input name="r-1">
       <input name="q-1">
       <input name="s-1">
       <input name="p-1">
  

• 表的下一行再次具有与第一行相似的5个输入字段，但是每个输入字段的名称中的计数值都增加1。

      <input name="t-2">
      <input name="r-2">
      <input name="q-2">
      <input name="s-2">
      <input name="p-2">
  

因此，对于每一行，计数值将根据行号增加1。 用户可以修改并发布表以更新数据库。

Todo：

• 我想在发布表单表进行更新时检索所有这些输入字段的值。
  有什么简单的方法可以实现这一目标吗？

请提出建议。
谢谢。

Answer 1

我认为最简单的方法是将类添加到您感兴趣的每个输入中。例如data-field。

所以每个输入看起来像这样

<input class="data-field" name="...">

然后遍历它们，将值添加到您要使用的任何数据结构中，这里我仅使用列表

var data = [];
$(".data-field").each((index, element) => { 
   data.push(element.value);
})

然后，您可以使用data的内容作为有效负载来执行所需的任何服务器请求。

但是，如果您仅打算使用HTML表单。仅确保所有输入都在表单主体内并且具有唯一的名称字段就足够了。

它们应该自动包含在表单的有效载荷中。

希望这会有所帮助。

Answer 2

querySelectorAll是您的朋友。 它允许您利用CSS selectors：

• document.querySelectorAll("input[name*='-1']")用于查询第一行
• document.querySelectorAll("input[name*='r-']")用于查询第一列

请参见fiddle。

没有伤害类。