用户输入时的Javascript/Jquery总和输入字段

我想直言不讳；我对Javascript/Jquery的理解很差。我正在学习：）我在PHP方面很强

我有一个表格，向用户显示一个单行项目，用户可以在其中输入信息。此表格为“变更单”。我很难理解我需要做什么，才能通过Total类别中的示例将输入字段“Count”和“Price”相加。我还需要在插入每一新行时进行求和

此页面将生成包含输入的行项目的模板化PDF文档

我编写的Javascript代码是

    let count = 0;
    $('p input[type="button"]').click(function () {
        count += 1;
    })
    $('#myTable').on('click', 'input[type="button"]', function () {
        $(this).closest('tr').remove();
    })
    $('p input[type="button"]').click(function () {
        var varItem = 'item_' + count;
        var varCount = 'count_' + count;
        var varPrice = 'price_' + count;
        var varTotal = 'total_' + count;
        $('#myTable').append('' +
            '<tr>' +
                '<td>' +
                    '<input type="text" class="form-control" name="' + varItem + '"/>' +
                '</td>' +
                '<td>' +
                    '<input type="text" class="form-control" name="' + varCount + '"/>' +
                '</td>' +
                '<td>' +
                    '<input type="text" class="form-control" name="' + varPrice + '"/>' +
                '</td>' +
                '<td>' +
                    'Count * Price = Total' +
                '</td>' +
                '<td>' +
                    '<input type="button" class="btn btn-sm btn-danger" value="Delete" />' +
                '</td>' +
            '</tr>'
        )
    });

let count=0；
$（'p input[type=“button”]”）。单击（函数（）{
计数+=1；
})
$（'#myTable'）。在（'click'，'input[type=“button”]”上，函数（）{
$（this）.closest（'tr'）.remove（）；
})
$（'p input[type=“button”]”）。单击（函数（）{
变量变量='item_'+计数；
var varCount='count_'+count；
var varPrice=‘价格’；
var varTotal='total_'+计数；
$（'#myTable'）。附加（''+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'计数*价格=总计'+
'' +
'' +
'' +
'' +
''
)
});

HTML

项目
计数
价格
全部的
行动
计数*价格=总计

在价格输入中添加类名（我添加了价格输入）

然后用

sum = 0
$( ".printInput" ).each(function( index ) {
  sum+= Number($( this ).val())
});
console.log("The sum is : " + sum)

我是根据你的代码做的

$（文档）.ready（函数（）{
让计数=0；
$（'p input[type=“button”]”）。单击（函数（）{
计数+=1；
})
$（'#myTable'）。在（'click'，'input[type=“button”]”上，函数（）{
$（this）.closest（'tr'）.remove（）；
})
$（'p input[type=“button”]”）。单击（函数（）{
变量变量='item_'+计数；
var varCount='count_'+count；
var varPrice=‘价格’；
var varTotal='total_'+计数；
$（'#myTable'）。附加（''+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'计数*价格=总计'+
'' +
'' +
'' +
'' +
''
)
});
$（document）.on（“change”、“.quantity”，函数（）{
$quantity=$（此项）；
$index=$quantity.attr（'name'）.split（'uu'）[1]
$price=$（'input[name=“price”+$index+“]'）。val（）
$（'.total\'+$index）.text（$price？$price*$quantity.val（）：0）
//警报（$price）；//jQuery 1.7+
});
$（document）.on（“change”和“.price”，函数（）{
$价格=$（本）；
$index=$price.attr（'name'）.split（'uu'）[1]
$quantity=$（'input[name=“count”+$index+“]'）。val（）
$（'.total\'+$index）.text（$quantity？$quantity*$price.val（）：0）
});
})

项目
计数
价格
全部的
行动

将

change

事件应用于

price

和

count

输入。当两个值都存在时，将

total

字段的

文本更改为
price*count


let count=0；
$（'p input[type=“button”]”）。单击（函数（）{
计数+=1；
})
$（'#myTable'）。在（'click'，'input[type=“button”]”上，函数（）{
$（this）.closest（'tr'）.remove（）；
})
$（'p input[type=“button”]”）。单击（函数（）{
变量变量='item_'+计数；
var varCount='count_'+count；
var varPrice=‘价格’；
var varTotal='total_'+计数；
$（'#myTable'）。附加（''+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'计数*价格=总计'+
'' +
'' +
'' +
'' +
''
);
计算总数（）；
});
函数计算器总计（）{
$（'input[name^=“count”]，input[name^=“price”]”）。在（'change'，function（）上{
const inputName=$（this）.attr（'name'）.split（'uu'）[1]；
常量count=+（$（`input[name=“count”{inputName}]`）.val（））；
常量price=+（$（`input[name=“price”{inputName}]`）.val（））；
如果（计数和价格）{
const total=$（`input[name=“price_${inputName}]`）；
$（总计）.text（计数*价格）；
}
});
}
计算总数（）

项目
计数
价格
全部的
行动
sum = 0
$( ".printInput" ).each(function( index ) {
  sum+= Number($( this ).val())
});
console.log("The sum is : " + sum)