使用 JavaScript 访问输入名称数组

Accessing input name array using JavaScript

本文关键字：数组 输入 JavaScript 访问 使用      更新时间：2023-09-26

我有以下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访问每个金额字段以插入总金额。

提前谢谢你。

在这种情况下，

我要做的是使用 parentNode 直到您到达包含<tr>，然后使用该表行节点搜索输入字段。

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

我也见过document.getElementsByName(name)它将返回一个数组，您可以遍历该数组并执行自己的操作，并且您不必使用额外的 ID，但我认为getElementById更常见。

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

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