如何计算列总值

Question

我想计算总小时数、总金额并希望将这些值分配给文本字段。 金额列已经正常工作。

**Table code**

for(var i = 0; i < json_value.length; i++) {

    // str += "<tr><td>"+json_value[i].taskCode+"</td>"+
    //     "<td>"+json_value[i].taskName+"</td>"+
    //     "<td>"+json_value[i].fullName+"</td>"+
    //     "<td>"++"</td><tr>"
    // console.log(view);
    
    str += "<tr><td ><input value='"+json_value[i].taskCode+"' name='taskCode"+i+"' id='taskCode"+i+"' style='width: 95%;border: 1px solid white;' readonly></td>"+
            "<td ><input value='"+json_value[i].taskName+"' name='taskName"+i+"' id='taskName"+i+"' style='width: 95%;border: 1px solid white;' readonly></td>"+
            "<td ><input value='"+json_value[i].empName+"' name='fullName"+i+"' id='fullName"+i+"' style='width: 95%;border: 1px solid white;' readonly></td>"+
            "<td ><input name='hours"+i+"' id='hours"+i+"' class='form-control' style='width: 95%;border: 0.1px solid black;' onkeyup='calAmount("+i+");'></td>"+
            "<td ><input name='rate"+i+"' id='rate"+i+"' class='form-control' style='width: 95%;border: 0.1px solid black;' onkeyup='calAmount("+i+");'></td>"+
            "<td ><input name='amount"+i+"' id='amount"+i+"' style='width: 95%;border: 1px solid white;' readonly></td>"+
            "</tr>";
}

$('#tbl').html(str);

脚本

<script>
function calAmount(i) {

    // alert(i);

    var hr   = document.getElementById("hours"+i).value;
    var rate = document.getElementById("rate"+i).value;

    var totHr     =   document.getElementById("totHours").value;
    //var totAmnt   =   document.getElementById("totAmount").value;

    var tot = hr * rate;
    $('#amount'+i).val(tot);

    //alert(test);
    totHr = totHr + hr;
    $("#totHours").val(totHr);

    //totAmnt = totAmnt + tot;
    //$("#totAmount").val(totAmnt);
}
</script>

Answer 1

像这样

给小时和费率 class 并执行此操作

• 任何输入（我们可以限制时间和费率）
• 循环遍历表中的一个字段 - 我选择了小时
• 对于找到的每个小时，找到父级并从父级找到单元格中的费率和小时数

const getNum = str => isNaN(str) || str.trim() === "" ? 0 : +str; // cast to a number or 0
$('#tbl').on("input", ":input", function() { // any input in the table
  let total = 0,
    totHrs = 0;
  $('#tbl').find(".hours").each(function() { // get all hours
    const $parent = $(this).closest("tr"); // take their parent row
    const hr = getNum($parent.find(".hours").val()); // could use this.value instead
    const rate = getNum(parent.find(".rate").val()); // find the rate
    const subTotal = hr * rate;
    total += subTotal;
    totHrs += hr;
  });
  $("#totHours").val(totHrs);
  $("#totAmount").val(total.toFixed(2));
})

此外，这里是如何使用我建议的 class 名称在一个 go 中解析您的 object 的方法。 也使用 class 来设置样式

const html = json_value.map((item,i) => `<tr><td ><input value="${item.taskCode}" name="taskCode${i}" class="input" readonly></td>
  <td><input value="${item.taskName}" name="taskName${i}" class="input" readonly></td>
  <td><input value="${item.empName}" name="fullName${i}"  class="input" readonly></td>
  <td><input name="hours${i}" class="form-control hours"></td>
  <td><input name="rate${i}" class="form-control rates"></td>
  <td ><input name="amount${i}" readonly></td>
  </tr>`).join("");
$("#tbl").html(html)

.input { width: 95%;border: 1px solid white; }
.form-control {width: 95%;border: 0.1px solid black;}