Question

我这里有两个HTML表，用于计算每列的总数。

这是我的问题

我不知道如何获得两张桌子的总数。

我希望在更改单元格中的数字时表现我的表格我希望总计在按键上重新计算。

还有任何想法如何简化我的JavaScript代码。

这是我的第一张桌子的代码。有关完整的代码，请参阅下面的小提琴链接。谢谢。

    <table style="border:1px solid purple">

    <tr id = "Tr1">
        <td><input class="cell2" type="text" name="cell2" value="SAMPLE2" /></td>
        <td><input class="cell3" type="text" name="cell3" value="267314.36"></td>
        <td><input class="cell4" type="text" name="cell4" value="5.95"></td>
        <td><input class="cell5" type="text" name="cell5" value ="1" ></td>
        <td><input class="cell6" type="text" name="cell6" value="267314.36"></td>
        <td><input class="cell7" type="text" name="cell7" value="5.95"></td>
        <td><input class="cell8" type="text" name="cell8" value=""></td>
        <td><input class="cell9" type="text" name="cell9" value="1"></td>
        <td><input class="cell10" type="text" name="cell10" value=""></td>
        <td><input class="cell11" type="text" name="cell11" value=""></td>
    </tr>

    <tr id = "Tr2">
        <td><input class="cell2" type="text" name="cell2" value="SAMPLE 3" /></td>
        <td><input class="cell3" type="text" name="cell3" value="259528.50"></td>
        <td><input class="cell4" type="text" name="cell4" value="6.27"></td>
        <td><input class="cell5" type="text" name="cell5" value ="2" ></td>
        <td><input class="cell6" type="text" name="cell6" value="519057.00"></td>
        <td><input class="cell7" type="text" name="cell7" value="12.54"></td>
        <td><input class="cell8" type="text" name="cell8" value="155717.10"></td>
        <td><input class="cell9" type="text" name="cell9" value="1"></td>
        <td><input class="cell10" type="text" name="cell10" value="155717.10"></td>
        <td><input class="cell11" type="text" name="cell11" value="6.27"></td>
    </tr>



    <tr id = "Tr9">
        <td>TOTAL</td>

        <td></td>
        <td></td>
        <td><div class = "" id = "total1">0.00</td>
        <td><div class = "" id = "total2">0.00</td>
        <td><div class = "" id = "total3">0.00</td>
        <td></td>
        <td><div class = "" id = "total4">0.00</td>
        <td><div class = "" id = "total5">0.00</td>
        <td><div class = "" id = "total6">0.00</td>
    </tr>
 </table>

这是我的代码和示例演示的小提琴。

JsFiddle Demo

Answer 1

我已将以下课程添加到<td>＆amp; <tr>

cell-val：单元格包含一个属于计算的值
cell-number：单元格包含一个数字（原因：使单元格右对齐）
cell-total：单元格包含总计
cell-grand-total：单元格包含总计
row-total：row包含总值
row-grand-total：行包含总计

我修改了calculateSum()功能。其中，计算是根据细胞指数进行的。

计算任何cell-total

获取td.cell-total
获取该索引中的所有上述单元格（$(curTable).find("tr>td.cell-val:nth-child(" + indCell + ")")）
totalCol =对所有上述单元格求和
在数据集中设置总和，以便在总计算中使用它（$(this).data('value', totalCol)）
设置cell-total = numberWithCommas(totalCol.toFixed(2))

此处，numberWithCommas()将您的号码转换为逗号分隔值，因为它使数字可读。

对总计进行了类似的计算。

以下是片段：如果有任何问题，请告诉我

$(document).ready(function() {
  $("input").keyup(function() {
    inputKeyUp();
    calculateSum();
  });

  calculateSum();
  inputKeyUp();

});

function inputKeyUp() {

  // TOTAL COST - 30s 
  $("input[name='cell3']").each(function(index) {
    var cell3 = $("input[name='cell3']").eq(index).val();
    var cell5 = $("input[name='cell5']").eq(index).val();
    var cell6 = parseFloat(cell3) * parseFloat(cell5);

    if (cell3 == "") {
      cell6 = 0;
    }

    if (cell3 == "") {
      cell8 = 0;
    } else {
      var cell6 = parseFloat(cell3) * parseFloat(cell5);
    }

    if (!isNaN(cell6)) {
      $("input[name='cell6']").eq(index).val(cell6.toFixed(2));
    }
  });


  // TOTAL TARPs - 30s 
  $("input[name='cell4']").each(function(index) {
    var cell4 = $("input[name='cell4']").eq(index).val();
    var cell5 = $("input[name='cell5']").eq(index).val();
    var cell7 = parseFloat(cell4) * parseFloat(cell5);

    if (cell4 == "") {
      cell7 = 0;
    }

    if (cell4 == "") {
      cell11 = 0;
    } else {
      var cell7 = parseFloat(cell4) * parseFloat(cell5);
    }
    if (!isNaN(cell7)) {
      $("input[name='cell7']").eq(index).val(cell7.toFixed(2));
    }
  });

  // COST/15s
  $("input[name='cell3']").each(function(index) {
    var cell3 = $("input[name='cell3']").eq(index).val();
    var cell8 = parseFloat(cell3) * parseFloat(0.6);

    if (cell3 == "") {
      cell8 = 0;
    } else {
      var cell8 = parseFloat(cell3) * parseFloat(0.6);
    }

    if (!isNaN(cell8)) {
      $("input[name='cell8']").eq(index).val(cell8.toFixed(2));
    }
  });

  // TOTAL COST - 15s 
  $("input[name='cell8']").each(function(index) {
    var cell8 = $("input[name='cell8']").eq(index).val();
    var cell9 = $("input[name='cell9']").eq(index).val();
    var cell10 = parseFloat(cell8) * parseFloat(cell9);

    if (cell9 == "") {
      cell10 = 0;
    }

    if (cell8 == "") {
      cell10 = 0;
    } else {
      var cell10 = parseFloat(cell8) * parseFloat(cell9);
    }

    if (!isNaN(cell10)) {
      $("input[name='cell10']").eq(index).val(cell10.toFixed(2));
    }
  });


  // TOTAL TARPs - 15s 
  $("input[name='cell4']").each(function(index) {
    var cell4 = $("input[name='cell4']").eq(index).val();
    var cell9 = $("input[name='cell9']").eq(index).val();
    var cell11 = parseFloat(cell4) * parseFloat(cell9);

    if (cell9 == "") {
      cell11 = 0;
    }

    if (cell4 == "") {
      cell11 = 0;
    } else {
      var cell11 = parseFloat(cell4) * parseFloat(cell9);
    }

    if (!isNaN(cell11)) {
      $("input[name='cell11']").eq(index).val(cell11.toFixed(2));
    }
  });


}

function calculateSum() {

  $("table").each(function() {
    var curTable = this;
    $(this).find(".cell-total").each(function() {
      var indCell = ($(this).index() + 1),
        totalCol = 0,
        cellValue;
      $(curTable).find("tr>td.cell-val:nth-child(" + indCell + ")").each(function() {
        cellValue = parseFloat($(this).find("input").val());
        totalCol += cellValue || 0;
      });
      $(this).data('value', totalCol);
      $(this).html(numberWithCommas(totalCol.toFixed(2)));
    });
  });

  $("table tr.row-grand-total td.cell-grand-total").each(function() {
    var indCell = ($(this).index() + 1),
      totalCol = 0,
      cellValue;
    $("table tr.row-total>td:nth-child(" + indCell + ")").each(function() {
      cellValue = parseFloat($(this).data("value"));
      totalCol += cellValue || 0;
    });
    $(this).find("div").html(numberWithCommas(totalCol.toFixed(2)));
  });

}

function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

.cell-number,
.cell-number input {
  text-align: right;
}
.row-grand-total {
  font-weight: bold;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</head>

<body>
  <table style="border:1px solid purple">
    <tr id="1">
      <td>
        <input class="cell2" type="text" name="cell2" id="cell2" value="SAMPLE 1" />
      </td>
      <td>
        <input class="cell3 cell-number" type="text" name="cell3" id="cell3" value="320000.00">
      </td>
      <td>
        <input class="cell4 cell-number" type="text" name="cell4" id="cell4" value="8.16">
      </td>
      <td class="cell-val">
        <input class="cell5 cell-number" type="text" name="cell5" id="cell5" value="2">
      </td>
      <td class="cell-val">
        <input class="cell6 cell-number" type="text" name="cell6" id="cell6" value="640000.00">
      </td>
      <td class="cell-val">
        <input class="cell7 cell-number" type="text" name="cell7" id="cell7" value="16.32">
      </td>
      <td>
        <input class="cell8 cell-number" type="text" name="cell8" id="cell8" value="192000.00">
      </td>
      <td class="cell-val">
        <input class="cell9 cell-number" type="text" name="cell9" id="cell9" value="5">
      </td>
      <td class="cell-val">
        <input class="cell10 cell-number" type="text" name="cell10" id="cell10" value="960,000.00">
      </td>
      <td class="cell-val">
        <input class="cell11 cell-number" type="text" name="cell11" id="cell11" value="40.80">
      </td>
    </tr>

    <tr id="Tr1">
      <td>
        <input class="cell2" type="text" name="cell2" value="SAMPLE2" />
      </td>
      <td>
        <input class="cell3 cell-number" type="text" name="cell3" value="267314.36">
      </td>
      <td>
        <input class="cell4 cell-number" type="text" name="cell4" value="5.95">
      </td>
      <td class="cell-val">
        <input class="cell5 cell-number" type="text" name="cell5" value="1">
      </td>
      <td class="cell-val">
        <input class="cell6 cell-number" type="text" name="cell6" value="267314.36">
      </td>
      <td class="cell-val">
        <input class="cell7 cell-number" type="text" name="cell7" value="5.95">
      </td>
      <td>
        <input class="cell8 cell-number" type="text" name="cell8" value="">
      </td>
      <td class="cell-val">
        <input class="cell9 cell-number" type="text" name="cell9" value="1">
      </td>
      <td class="cell-val">
        <input class="cell10 cell-number" type="text" name="cell10" value="">
      </td>
      <td class="cell-val">
        <input class="cell11 cell-number" type="text" name="cell11" value="">
      </td>
    </tr>

    <tr id="Tr2">
      <td>
        <input class="cell2" type="text" name="cell2" value="SAMPLE 3" />
      </td>
      <td>
        <input class="cell3 cell-number" type="text" name="cell3" value="259528.50">
      </td>
      <td>
        <input class="cell4 cell-number" type="text" name="cell4" value="6.27">
      </td>
      <td class="cell-val">
        <input class="cell5 cell-number" type="text" name="cell5" value="2">
      </td>
      <td class="cell-val">
        <input class="cell6 cell-number" type="text" name="cell6" value="519057.00">
      </td>
      <td class="cell-val">
        <input class="cell7 cell-number" type="text" name="cell7" value="12.54">
      </td>
      <td>
        <input class="cell8 cell-number" type="text" name="cell8" value="155717.10">
      </td>
      <td class="cell-val">
        <input class="cell9 cell-number" type="text" name="cell9" value="1">
      </td>
      <td class="cell-val">
        <input class="cell10 cell-number" type="text" name="cell10" value="155717.10">
      </td>
      <td class="cell-val">
        <input class="cell11 cell-number" type="text" name="cell11" value="6.27">
      </td>
    </tr>

    <tr id="Tr3">
      <td>
        <input class="cell2" type="text" name="cell2" value="SAMPLE 4" />
      </td>
      <td>
        <input class="cell3 cell-number" type="text" name="cell3" value="243013.04">
      </td>
      <td>
        <input class="cell4 cell-number" type="text" name="cell4" value="7.24">
      </td>
      <td class="cell-val">
        <input class="cell5 cell-number" type="text" name="cell5" value="1">
      </td>
      <td class="cell-val">
        <input class="cell6 cell-number" type="text" name="cell6" value="243013.04">
      </td>
      <td class="cell-val">
        <input class="cell7 cell-number" type="text" name="cell7" value="7.24">
      </td>
      <td>
        <input class="cell8 cell-number" type="text" name="cell8" value="145807.82">
      </td>
      <td class="cell-val">
        <input class="cell9 cell-number" type="text" name="cell9" value="6">
      </td>
      <td class="cell-val">
        <input class="cell10 cell-number" type="text" name="cell10" value="874846.92">
      </td>
      <td class="cell-val">
        <input class="cell11 cell-number" type="text" name="cell11" value="43.44">
      </td>
    </tr>

    <tr id="Tr9" class="row-total">
      <td>TOTAL</td>

      <td></td>
      <td></td>
      <td class="cell-total cell-number">
        <div class="" id="total1">0.00</td>
      <td class="cell-total cell-number">
        <div class="" id="total2">0.00</td>
      <td class="cell-total cell-number">
        <div class="" id="total3">0.00</td>
      <td></td>
      <td class="cell-total cell-number">
        <div class="" id="total4">0.00</td>
      <td class="cell-total cell-number">
        <div class="" id="total5">0.00</td>
      <td class="cell-total cell-number">
        <div class="" id="total6">0.00</td>
    </tr>
  </table>

  <br />

  <table style="border:1px solid purple">
    <tr id="Tr4">

      <td>
        <input class="celltab2" type="text" name="celltab2" id="celltab2" value="SAMPLE 1" />
      </td>
      <td>
        <input class="celltab3 cell-number" type="text" name="celltab3" id="celltab3" value="320000.00">
      </td>
      <td>
        <input class="celltab4 cell-number" type="text" name="celltab4" id="celltab4" value="8.16">
      </td>
      <td class="cell-val">
        <input class="celltab5 cell-number" type="text" name="celltab5" id="celltab5" value="2">
      </td>
      <td class="cell-val">
        <input class="celltab6 cell-number" type="text" name="celltab6" id="celltab6" value="640000.00">
      </td>
      <td class="cell-val">
        <input class="celltab7 cell-number" type="text" name="celltab7" id="celltab7" value="16.32">
      </td>
      <td>
        <input class="celltab8 cell-number" type="text" name="celltab8" id="celltab8" value="192000.00">
      </td>
      <td class="cell-val">
        <input class="celltab9 cell-number" type="text" name="celltab9" id="celltab9" value="5">
      </td>
      <td class="cell-val">
        <input class="celltab10 cell-number" type="text" name="celltab10" id="celltab10" value="960,000.00">
      </td>
      <td class="cell-val">
        <input class="celltab11 cell-number" type="text" name="celltab11" id="celltab11" value="40.80">
      </td>
    </tr>

    <tr id="Tr5">

      <td>
        <input class="celltab2" type="text" name="celltab2" value="SAMPLE 2" />
      </td>
      <td>
        <input class="celltab3 cell-number" type="text" name="celltab3" value=" 219,082.50">
      </td>
      <td>
        <input class="celltab4 cell-number" type="text" name="celltab4" value="6.21">
      </td>
      <td class="cell-val">
        <input class="celltab5 cell-number" type="text" name="celltab5" value="0">
      </td>
      <td class="cell-val">
        <input class="celltab6 cell-number" type="text" name="celltab6" value="0">
      </td>
      <td class="cell-val">
        <input class="celltabe7 cell-number" type="text" name="celltab7" value="0">
      </td>
      <td>
        <input class="celltab8 cell-number" type="text" name="celltab8" value="131449.50">
      </td>
      <td class="cell-val">
        <input class="celltab9 cell-number" type="text" name="celltab9" value="7">
      </td>
      <td class="cell-val">
        <input class="celltab10 cell-number" type="text" name="celltab10" value="920146.50">
      </td>
      <td class="cell-val">
        <input class="celltab11 cell-number" type="text" name="celltab11" value="43.47">
      </td>
    </tr>

    <tr id="Tr6">

      <td>
        <input class="celltab2" type="text" name="cell2" value="SAMPLE 3" />
      </td>
      <td>
        <input class="celltab3 cell-number" type="text" name="cell3" value="224700.00">
      </td>
      <td>
        <input class="celltab4 cell-number" type="text" name="cell4" value="5.23">
      </td>
      <td class="cell-val">
        <input class="celltab5 cell-number" type="text" name="cell5" value="">
      </td>
      <td class="cell-val">
        <input class="celltab6 cell-number" type="text" name="cell6" value="">
      </td>
      <td class="cell-val">
        <input class="celltab7 cell-number" type="text" name="cell7" value="">
      </td>
      <td>
        <input class="celltab8 cell-number" type="text" name="cell8" value="134820.00">
      </td>
      <td class="cell-val">
        <input class="celltab9 cell-number" type="text" name="cell9" value="6">
      </td>
      <td class="cell-val">
        <input class="celltab10 cell-number" type="text" name="cell10" value="808920.00">
      </td>
      <td class="cell-val">
        <input class="celltab11 cell-number" type="text" name="cell11" value="34.38">
      </td>
    </tr>

    <tr id="Tr7">

      <td>
        <input class="celltab2" type="text" name="celltab2" value="SAMPLE 4" />
      </td>
      <td>
        <input class="celltab3 cell-number" type="text" name="celltab3" value="243013.04">
      </td>
      <td>
        <input class="celltab4 cell-number" type="text" name="celltab4" value="7.67">
      </td>
      <td class="cell-val">
        <input class="celltab5 cell-number" type="text" name="celltab5" value="2">
      </td>
      <td class="cell-val">
        <input class="celltab6 cell-number" type="text" name="celltab6" value="243013.04">
      </td>
      <td class="cell-val">
        <input class="celltab7 cell-number" type="text" name="celltab7" value="7.24">
      </td>
      <td>
        <input class="celltab8 cell-number" type="text" name="celltab8" value="145807.82">
      </td>
      <td class="cell-val">
        <input class="celltab9 cell-number" type="text" name="celltab9" value="6">
      </td>
      <td class="cell-val">
        <input class="celltab10 cell-number" type="text" name="celltab10" value="874846.92">
      </td>
      <td class="cell-val">
        <input class="celltab11 cell-number" type="text" name="celltab11" value="43.44">
      </td>
    </tr>

    <tr id="Tr8" class="row-total">
      <td>TOTAL</td>

      <td></td>
      <td></td>
      <td class="cell-total cell-number">
        <div class="" id="totaltab1">0.00</td>
      <td class="cell-total cell-number">
        <div class="" id="totaltab2">0.00</td>
      <td class="cell-total cell-number">
        <div class="" id="totaltab3">0.00</td>
      <td></td>
      <td class="cell-total cell-number">
        <div class="" id="totaltab4">0.00</td>
      <td class="cell-total cell-number">
        <div class="" id="totaltab5">0.00</td>
      <td class="cell-total cell-number">
        <div class="" id="totaltab6">0.00</td>
    </tr>

    <tr id="Tr10" class="row-grand-total">
      <td>GRAND TOTAL</td>
      <td></td>
      <td></td>
      <td class="cell-grand-total cell-number">
        <div class="" id="grandtot1">0.00</td>
      <td class="cell-grand-total cell-number">
        <div class="" id="grandtot2">0.00</td>
      <td class="cell-grand-total cell-number">
        <div class="" id="grandtot3">0.00</td>
      <td></td>
      <td class="cell-grand-total cell-number">
        <div class="" id="grandtot4">0.00</td>
      <td class="cell-grand-total cell-number">
        <div class="" id="grandtot5">0.00</td>
      <td class="cell-grand-total cell-number">
        <div class="" id="grandtot6">0.00</td>
    </tr>
  </table>
</body>

</html>

Answer 2

你不需要对你的细胞ID进行硬编码。

如果您了解nth-child选择器和index()方法，则可以轻松完成。

这是工作解决方案。

HystrixCommand

$(function() {
  $(document).on("keyup", "input[type='text']", function(event) {

    var $cell = $(event.target).parent();
    var index = $cell.index() + 1;
    var $containerTable = $cell.closest("table");
    var sum = 0;
    //iterate over the entire columns that you want to have total caluculated.
    $.each($("td:nth-child(" + index + ")", $containerTable), function(idx, cell) {
      sum += ($(cell).find("input").length) ? +($(cell).find("input").val()) : 0;
    });
    //Once caculated, update the corresponding result cell on that table.
    $(".result td:eq(" + (index - 1) + ") div", $containerTable).html(sum);

    //Once result is calculated, update the grand total by iterating over the grand total cells.
    $.each($(".grand-result div"), function(idx, grCell) {
      var resultIndex = $(grCell).parent().index();
      var grandSum = 0;
      $.each($(".result td:nth-child(" + (resultIndex + 1) + ")"), function(idx, resultCell) {

        grandSum += ($(resultCell).find("div").length) ? +($(resultCell).find("div").html()) : 0;
      });

      $(grCell).text(grandSum);

    });

  });
  $("input[type='text']").trigger("keyup");
});

Answer 3

使用vanilla js获取所有输入值。不需要jquery。除非需要旧版浏览器支持？您也可以考虑将输入类型更改为“数字”。这样您就可以减少必须执行的额外检查。

注意：我没有将该功能附加到'keyup'，但我相信你可以管理它：）

let fields = document.querySelectorAll('input');
let value = 0;

for (i = 0; i < fields.length; i++) {
  let itemVal = fields[i].value;
  if (!isNaN(itemVal) && itemVal != '') { // May need additional checks/regex to make sure value is a number
    console.log(itemVal)
    value = value + parseFloat(itemVal)

  } 
}

console.log(value)

https://jsfiddle.net/fobpoLtL/1/

获得两个表的总计

3 个答案: