javascript - 使用 JavaScript 访问输入名称数组

Question

我有以下 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 插入总金额。

先感谢您。

Answer 1

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

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

Answer 2

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

Answer 3

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

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