javascript - 自动计算发票中的价格

Question

我正在制作一个发票系统，我想让价格文本框自动计算。我在发票中有一个随机行表。如何通过价格文本框上的 JS 函数来做到这一点。

var rowCount = 0;

function addRow(tableID) {

  var table = document.getElementById(tableID);

  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);

  var cell1 = row.insertCell(0);
  var element1 = document.createElement("input");
  element1.type = "checkbox";
  element1.name = "chk[]";
  cell1.appendChild(element1);

  var cell2 = row.insertCell(1);
  cell2.innerHTML = rowCount;

  var cell3 = row.insertCell(2);
  var element2 = document.createElement("input");
  element2.type = "text";
  element2.name = "item[]";
  element2.required = "required";
  cell3.appendChild(element2);

  var cell4 = row.insertCell(3);
  var element3 = document.createElement("input");
  element3.type = "text";
  element3.name = "qty[]";
  cell4.appendChild(element3);

  var cell5 = row.insertCell(4);
  var element4 = document.createElement("input");
  element4.type = "text";
  element4.name = "cost[]";
  cell5.appendChild(element4);

  var cell5 = row.insertCell(4);
  var element4 = document.createElement("input");
  element4.type = "text";
  element4.name = "price[]";
  cell5.appendChild(element4);



}

function deleteRow(tableID) {
  try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for (var i = 0; i < rowCount; i++) {
      var row = table.rows[i];
      var chkbox = row.cells[0].childNodes[0];
      if (null != chkbox && true == chkbox.checked) {
        table.deleteRow(i);
        rowCount--;
        i--;
      }


    }
  } catch (e) {
    alert(e);
  }
}

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<form action="" method="post" enctype="multipart/form-data">
  invoice:
  <INPUT type="text" name="invoice id" />

  <TABLE id="dataTable" width="350px" border="1" style="border-collapse:collapse;">
    <TR>
      <TH>Select</TH>
      <TH>Sr. No.</TH>
      <TH>Item</TH>
      <TH>Cost</TH>
      <TH>Qty</TH>
      <TH formula="cost*qty" summary="sum">Price</TH>
    </TR>
    <TR>
      <TD>
        <INPUT type="checkbox" name="chk[]" />
      </TD>
      <TD> 1 </TD>
      <TD>
        <INPUT type="text" name="item[] " /> </TD>
      <TD>
        <INPUT type="text" name="qty[]" /> </TD>
      <TD>
        <INPUT type="text" name="cost[]" /> </TD>
      <TD>
        <INPUT type="text" name="price[]" /> </TD>
    </TR>

  </TABLE>
  <input type="submit" />
</form>

Answer 1

更新 2022 年

const container = document.getElementById("container")
const table = document.querySelector("#dataTable tbody");
const totalField = document.getElementById("total");
const addRow = () => {
  const newRow = table.firstElementChild.cloneNode(true);
  newRow.querySelectorAll("input").forEach(inp => inp.type === "checkbox" ? inp.checked = false : inp.value = "")
  table.appendChild(newRow)
  newRow.querySelectorAll("td")[1].textContent = table.querySelectorAll("tr").length;
};
const removeRow = () => {
  table.querySelectorAll("[type=checkbox]:checked").forEach(chk => chk.closest("tr").remove())
  table.querySelectorAll("tr td:nth-child(2)").forEach((cell, i) => cell.textContent = i + 1);
  totalIt();
};

const totalIt = (e) => {
  if (e && e.target.matches("[type=checkbox]")) return;
  const qtyFields = [...document.getElementsByName("qty[]")];
  let total = qtyFields.map(qtyField => {
    const parent = qtyField.closest("tr");
    const qty = +qtyField.value;
    const cost = +parent.querySelector(".cost").value;
    const priceField = parent.querySelector(".price");
    let price = cost * qty;
    if (isNaN(price)) price = 0;
    priceField.value = price.toFixed(2);
    return price;
  }).reduce((a, b) => a + b)
  totalField.value = total ? total.toFixed(2) : "0.00";
};


container.addEventListener("click", function(e) {
  const tgt = e.target;
  if (!tgt.id) return;
  if (tgt.id === "add") addRow();
  else if (tgt.id === "remove") removeRow();
})
container.addEventListener("input", totalIt);

#dataTable {
  width: 350px;
  margin: 5px;
}

#dataTable tr,
td,
th {
  border: 1px solid black;
  border-collapse: collapse;
}

<div id="container">
  <input type="button" value="Add Row" id="add" />
  <input type="button" value="Delete checked Rows" id="remove" />
  <form action="" method="post" enctype="multipart/form-data">
    invoice:<input type="text" name="invoice id" />

    <table id="dataTable">
      <thead>
        <tr>
          <th>Select</th>
          <th>Sr. No.</th>
          <th>Item</th>
          <th>Qty</th>
          <th>Cost</th>
          <th formula="cost*qty" summary="sum">Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox" name="chk[]" /></td>
          <td>1</td>
          <td><input type="text" name="item[] " /></td>
          <td><input type="text" class="qty" name="qty[]" /></td>
          <td><input type="text" class="cost" name="cost[]" /></td>
          <td><input type="text" class="price" name="price[]" /></td>
        </tr>
      </tbody>
    </table>
    total: <input type="text" readonly="readonly" id="total" /><br />
    <input type="submit" />
  </form>

旧答案

DEMO

根据标题单元格，您的成本和数量在错误的单元格中!!!

 <TD> <INPUT type="text" id="qty1" name="qty[]"/> </TD>
 <TD> <INPUT type="text" id="cost1" name="cost[]" /> </TD>
 <TD> <INPUT type="text" id="price1" name="price[]" /> </TD>

新代码:

function calc(idx) {
    
  var price = parseFloat(document.getElementById("cost"+idx).value)*
              parseFloat(document.getElementById("qty"+idx).value);
  //  alert(idx+":"+price);  
  document.getElementById("price"+idx).value= isNaN(price)?"0.00":price.toFixed(2)
}

window.onload=function() {
  document.getElementsByName("qty[]")[0].onkeyup=function() {calc(1)};
  document.getElementsByName("cost[]")[0].onkeyup=function() {calc(1)};
}

var rowCount =0;
function addRow(tableID) {
        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.name = "chk[]";
        cell1.appendChild(element1);

        var cell2 = row.insertCell(1);
        cell2.innerHTML = rowCount;

        var cell3 = row.insertCell(2);
        var element3 = document.createElement("input");
        element3.type = "text";
        element3.name = "item[]";
        element3.required = "required";
        cell3.appendChild(element3);

        var cell4 = row.insertCell(3);
        var element4 = document.createElement("input");
        element4.type = "text";
        element4.name = "qty[]";
        element4.id = "qty"+rowCount;
        element4.onkeyup=function() {calc(rowCount);}
        cell4.appendChild(element4);

        var cell5 = row.insertCell(4);
        var element5 = document.createElement("input");
        element5.type = "text";
        element5.name = "cost[]";
        element5.id = "cost"+rowCount;
        element5.onkeyup=function() {calc(rowCount);}
        cell5.appendChild(element5);

        var cell6 = row.insertCell(5);
        var element6 = document.createElement("input");
        element6.type = "text";
        element6.name = "price[]";
        element6.id = "price"+rowCount
        cell6.appendChild(element6);



    }

    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }


        }
        }catch(e) {
            alert(e);
        }
    }

这是一个总计 - 如果您将 calc 剪切并粘贴到我执行 calc(i) 的位置，您实际上可以用此替换 calc

function totalIt() {
  var qtys = document.getElementsByName("qty[]");
  var total=0;
  for (var i=1;i<=qtys.length;i++) {
    calc(i);  
    var price = parseFloat(document.getElementById("price"+i).value);
    total += isNaN(price)?0:price;
  }
  document.getElementById("total").value=isNaN(total)?"0.00":total.toFixed(2);                        
}