Javascript 如何使用jquery计算一行中的某个字段

Javascript 如何使用jquery计算一行中的某个字段,javascript,jquery,html,calculated-columns,Javascript,Jquery,Html,Calculated Columns,我已经创建了一些代码来计算行中的一些字段。但我添加了一些函数,所以我可以使用jquery动态添加行 这是我的代码笔上的源代码 点击 这是我计算qtyItem列和price列的函数 $("tbody").keyup(function() { var qtyItem = parseFloat($("#qtyItem").val()); var price = parseFloat($("#price").val()); var subTotal = qtyItem * pr

我已经创建了一些代码来计算行中的一些字段。但我添加了一些函数,所以我可以使用jquery动态添加行

这是我的代码笔上的源代码 点击

这是我计算qtyItem列和price列的函数

$("tbody").keyup(function() {
    var qtyItem = parseFloat($("#qtyItem").val());
    var price = parseFloat($("#price").val());

    var subTotal = qtyItem * price;
    $("#subTotal").attr("value", subTotal);
  });

问题是,当我尝试计算第一行时,它的工作正常。但是其他不受我的脚本中的函数影响。

ID必须是唯一的,因此避免重复。为此,您可以使用(请参阅代码段中的${nextitx}

您需要考虑

返回的NA值。 现在,在价格事件处理程序中,您可以更改策略:

  • 获取父行
  • 找到一个元素,在具有
新代码现在是:

$(“.addItem”)。单击(函数(e){
var nextIdx=$(“表tbody tr”)。长度+1;
变量行=`
`;
$(“表格”)。追加(第行);
});
//小计
$(“tbody”).keyup(函数(e){
var crow=$(e.target).closest('tr');//获取父行
//在儿童中找到qtyItem
var qtyItem=parseFloat(crow.find(“[id^=qtyItem]”)val())| 0;
//在孩子们身上找到价值
var price=parseFloat(crow.find(“[id^=price]”)val())| 0;
var小计=数量项目*价格;
crow.find(“[id^=小计]”).attr(“值”,小计);
});
表格,td,th{
边框:2件,纯色,黑色;
}

用户名

日期
项目表 项目 数量 价格 小计 添加项
您可以在不使用
id
属性的情况下执行此操作,而可以对每一行使用
name
属性

$(文档).ready(函数(){
//单击按钮添加行
$(“.addItem”)。单击(函数(){
变量行=`
`;
$(“表格”)。追加(第行);
});
常量$tBody=$('tBody')
//小计
$tBody.on(“键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控{
让$parentTr=$(this.closest(“tr”);
让qtyItem=parseFloat($parentTr.find('td input[name=“qtyItem”]”).val();
让price=parseFloat($parentr.find('td-input[name=“price”]).val());
如果(!isNaN(qtyItem)和&!isNaN(价格)){
小计=数量项目*价格;
$parentTr.find('td input[name=“subTotal”]').attr(“value”,subTotal);
}
});
});
表格,td,th{
边框:2件,纯色,黑色;
}

用户名

日期
项目表 项目 数量 价格 小计 添加项