使用 JavaScript 访问输入名称数组答案

【问题标题】：Accessing input name array using JavaScript使用 JavaScript 访问输入名称数组
【发布时间】：2012-06-12 14:34:53
【问题描述】：

我有以下 HTML 表单

<form action="#" method="post">

 <table>
 <tr>  
  <td><label>Product:<label> <input type="text" /></td>
  <td><label>Price:<label> <input type="text" /></td>
  <td><label>Quantity:<label> <input type="text"/></td>
  <td><label>Amount:<label> <input type="text" name="amount[]"/></td>
 </tr>

 <tr>  
 <td><label>Product:<label> <input type="text" /></td>
 <td><label>Price:<label> <input type="text" /></td>
 <td><label>Quantity:<label> <input type="text"/></td>
 <td><label>Amount:<label> <input type="text" name="amount[]"/></td>
 </tr>

 <!---only two rows have been created by the user -->


 <input type="button" value="Add product" onClick="addProductRow()"/> 
 <input type="submit" value="Submit"/>
 </table>  
</form>

输入字段由用户动态创建（有用于向页面添加行的按钮）。当用户添加价格和数量时，金额（价格*数量）必须显示在相关金额字段中。

我的问题是，如何访问每个金额字段以使用 JavaScript 或 jQuery 插入总金额。

提前谢谢你。

【问题讨论】：

你有没有尝试过？

标签： javascript jquery html forms dom

【解决方案1】：

在这种情况下，我会使用parentNode 直到找到包含<tr>，然后使用该表行节点来搜索输入字段。

【讨论】：

【解决方案2】：

您还应该为每个字段添加一个 ID（像 quantityfields[] 和 pricefields[] 这样的数组名称也可以）并使用标准的 document.getElementById("quantityfields[0]")

我还看到document.getElementsByName(name) 会返回一个数组，您可以遍历该数组并做自己的事情，而且您不必使用额外的 ID，但我认为getElementById 更常见。

【讨论】：

【解决方案3】：

使用 jQuery（如果您没有 id 并且页面上只有一个表格）

var total;
$("table").find("tr").each(function(index, elem){
    total = total + parseInt($("td:eq(3) input", this).val());
});

【讨论】：