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

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

Answer 2

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

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

Answer 3

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

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

使用JavaScript访问输入名称数组

3 个答案: