如何从行总计中获取总计

Question

I am new in javascript. 我是javascript新手。 I have a table with Product Price, Quantity, Width and Height. 我有一个带有产品价格，数量，宽度和高度的表。 I have a single row in the invoice and there is a button for adding new row and delete row. 我的发票中有一行，并且有一个用于添加新行和删除行的按钮。 I got the total of each row separately. 我分别得到每一行的总数。 Now I want to get the Grand Total from Totals of all products. 现在，我想从所有产品的总计中获得总计。 After adding the product grand total, I want to store this invoice in Database. 在添加产品总计之后，我想将此发票存储在数据库中。 Kindly give me a better solution. 请给我一个更好的解决方案。 Thanks in advance. 提前致谢。 Regards 问候

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style>
    table,tr,td,th { border: 1px black solid;}

</style>
</head>

<body>
<table>
  <thead>
    <th>Price</th>
    <th>Quantity</th>
    <th>Width</th>
    <th>Height</th>
    <th>Total</th>
    <th>Action</th>
  </thead>

  <tbody id="product_table">
    <tr>
        <td><input type="text" name="price"></td>
        <td><input type="text" name="quantity"></td>
        <td><input type="text" name="width"></td>
        <td><input type="text" name="height"></td>
        <td><input type="text" name="total" readonly></td>
        <td><input type="button" value="X" onclick="deleteRow(this)"/></td>
    </tr>

  </tbody>
    <input type="button" name="submit" value="Add Row" onclick="add_fields();">

</table>
<span>Grand Total<input type="text" name="grandtotal" readonly></span>
</body>

<script>

const table = document.getElementById('product_table');
table.addEventListener('input', ({ target }) => {
  const tr = target.closest('tr');
  const [price, quantity, width, height, total] = tr.querySelectorAll('input');

  var size = width.value * height.value;
  var rate = price.value * quantity.value;

  if (size != "") {
    total.value = size * rate;
  }else{
    total.value = rate; 
  }
});

function add_fields() {
  var row = document.createElement("tr");
  row.innerHTML =
    '<td><input type="text" name="price"></td>' +
    '<td><input type="text" name="quantity"></td>' +
    '<td><input type="text" name="width"></td>' +
    '<td><input type="text" name="height"></td>' +
    '<td><input type="text" name="total" readonly></td>' +
    '<td><input type="button" value="X" onclick="deleteRow(this)"/></td>';

  table.appendChild(row);
}

function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

</script>
</html>

Answer 1

Here is your working code. 这是您的工作代码。

<!DOCTYPE html>
<html>
<head>
    <title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js</script>
<style>
    table,tr,td,th { border: 1px black solid;}

</style>
</head>

<body>
<table>
  <thead>
    <th>Price</th>
    <th>Quantity</th>
    <th>Width</th>
    <th>Height</th>
    <th>Total</th>
    <th>Action</th>
  </thead>

  <tbody id="product_table">
    <tr>
        <td><input type="text" name="price"></td>
        <td><input type="text" name="quantity"></td>
        <td><input type="text" name="width"></td>
        <td><input type="text" name="height"></td>
        <td><input type="text" name="total" class="totalPrice" readonly></td>
        <td><input type="button" value="X" onclick="deleteRow(this)"/></td>
    </tr>

  </tbody>
    <input type="button" name="submit" value="Add Row" onclick="add_fields();">

</table>
<span>Grand Total<input type="text" name="grandtotal" id="grandtotal" readonly></span>
</body>

<script>

const table = document.getElementById('product_table');
table.addEventListener('input', ({ target }) => {
  const tr = target.closest('tr');
  const [price, quantity, width, height, total] = tr.querySelectorAll('input');

  var size = width.value * height.value;
  var rate = price.value * quantity.value;

  if (size != "") {
    total.value = size * rate;
  }else{
    total.value = rate; 
  }
  totalPrice();
});

function add_fields() {
  var row = document.createElement("tr");
  row.innerHTML =
    '<td><input type="text" name="price"></td>' +
    '<td><input type="text" name="quantity"></td>' +
    '<td><input type="text" name="width"></td>' +
    '<td><input type="text" name="height"></td>' +
    '<td><input type="text" name="total"  class="totalPrice" readonly></td>' +
    '<td><input type="button" value="X" onclick="deleteRow(this)"/></td>';

  table.appendChild(row);
}

function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
  totalPrice();
}
function totalPrice(){
var sum = 0;
 $(".totalPrice").each(function(){
 sum += parseFloat($(this).val());
});
$("#grandtotal").val(sum);
}

</script>
</html>

Hope it will work for you. 希望它对您有用。

Check this demo: https://jsfiddle.net/8jo7u4ya/ 检查此演示： https : //jsfiddle.net/8jo7u4ya/

如何从行总计中获取总计

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-10-29 10:35:26

如何从行总计中获取总计

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-10-29 10:35:26

解决方案1
1 已采纳 2018-10-29 10:35:26