Question

我有一个包含多个字段的动态表单。我需要使用jquery实时计算在这些字段中输入的值我知道我们可以通过获取$('#someID').val();值来实现，但这里我有多个需要计算的输入字段。

这些输入字段是从动态数据生成的。所以需要一些适合任何领域的通用代码。

以下是JSFiddle

提前致谢。

Answer 1

只需使用类代替ID 所有您的字段

<input type="text" class="form-control emp_weekday_hrs" name="emp0[weekday_hrs]" id="emp0_weekday_hrs">

然后在jQuery中更新同一行

的值

$('body').on('change', '.emp_weekday_hrs, .emp_weekend_hrs, .emp_cash_hrs', function(){
    var $row = $(this).closest("tr");
    var hrs1 = parseFloat($('.emp_weekday_hrs', $row).val()) || 0;
  var hrs2 = parseFloat($('.emp_weekend_hrs', $row).val()) || 0;
  var hrs3 = parseFloat($('.emp_cash_hrs', $row).val()) || 0;

  var rate1 = parseFloat($('.emp_weekday_rate', $row).val()) || 0;
  var rate2 = parseFloat($('.emp_weekend_rate', $row).val()) || 0;
  var rate3 = parseFloat($('.emp_cash_rate', $row).val()) || 0;

    var totalHrs = hrs1 + hrs2 + hrs3;
  var totalSalary = hrs1*rate1 + hrs2*rate2 + hrs3*rate3

    $('.emp_total_hrs', $row).val(totalHrs);
    $('.emp_total_salary', $row).val(totalSalary);
})

此处示例：JSFIDDLE

Answer 2

我的解决方案将通过您的html与您的ids一起使用，此时无需进行任何更改。但更好的方法是将它们更改为classes以便在事件监听器中更好地识别，但这也可以。

该脚本将选择父input内的tr ID并计算行数。请注意，我已将监听器更改为table上的实时委派，并添加了keyup，因此更改不会等待blur字段上的input。

$("table").on("change keyup", "tr input", function() {
    var parent = $(this).closest("tr");

    var hrs1  = parseFloat($('[id$=_weekday_hrs]', parent).val())  || 0;
    var hrs2  = parseFloat($('[id$=_weekend_hrs]', parent).val())  || 0;
    var hrs3  = parseFloat($('[id$=_cash_hrs]', parent).val())     || 0;
    var rate1 = parseFloat($('[id$=_weekday_rate]', parent).val()) || 0;
    var rate2 = parseFloat($('[id$=_weekend_rate]', parent).val()) || 0;
    var rate3 = parseFloat($('[id$=_cash_rate]', parent).val())    || 0;

    $('[id$=total_hrs]', parent).val(hrs1 + hrs2 + hrs3);
    $('[id$=_total_salary]', parent).val(hrs1*rate1 + hrs2*rate2 + hrs3*rate3);
});

<强> Working example.

Answer 3

使用keyup事件并添加＆＃39;输入行＆＃39;每一课的课程。

使用输入框将输入行类添加到所有行：

 <tr class="input-row" id="2">

进行更改后，您可以遍历行并计算总计：

$('input').on('keyup', function(){
    // Get the input rows
    var rows = $('.input-row');
  // Loop through rows
  rows.each(function() {
    // Use the row id to refer to the table input boxes
    var i = $(this).attr('id');

    // Concact each input elements id with the id of the row
    var hrs1 = parseFloat($('#emp'+i+'_weekday_hrs').val()) || 0;
    var hrs2 = parseFloat($('#emp'+i+'_weekend_hrs').val()) || 0;
    var hrs3 = parseFloat($('#emp'+i+'_cash_hrs').val()) || 0;

    var rate1 = parseFloat($('#emp'+i+'_weekday_rate').val()) || 0;
    var rate2 = parseFloat($('#emp'+i+'_weekend_rate').val()) || 0;
    var rate3 = parseFloat($('#emp'+i+'_cash_rate').val()) || 0;

    var totalHrs = hrs1 + hrs2 + hrs3;
    var totalSalary = hrs1*rate1 + hrs2*rate2 + hrs3*rate3

    $('#emp'+i+'_total_hrs').val(totalHrs);
    $('#emp'+i+'_total_salary').val(totalSalary);
  });
})

这是jsFiddle。

Jquery：实时计算输入值的通用函数

3 个答案: