时间戳

首页 > 解决方案 > 如何汇总表格行中的所有总数？JS

javascript - 如何汇总表格行中的所有总数？JS

问题描述

新手在这里.. 我一直在寻找某种函数，可以合计表中一种输入类型的数量，即 Amount 输入。我已经尝试对数量及其单元格使用 parseInt 函数，但它不起作用。我认为它只获得 .innerHTML 而不是它包含的应该是数字。

var entryButton = document.getElementById('inputButton')
const tbodyEl = document.querySelector("tbody");
var row = 1;

//click button event
entryButton.addEventListener('click', tableDisplay);

//input value and displaying information
function tableDisplay(e) {
  e.preventDefault()
  var name = document.getElementById('inputName').value;
  var amount = document.getElementById('inputAmount').value;
  var date = document.getElementById('inputDate').value;
  var remarks = document.getElementById('inputRemarks').value;
  
  document.getElementById('inputName').value = '';
  document.getElementById('inputAmount').value = '';
  document.getElementById('inputDate').value = '';
  document.getElementById('inputRemarks').value = '';
  
  if (!name || !amount || !date || !remarks) {
    alert("Please fill all the blanks")
    return;
  }

  name.value = " ";
  amount.value = " ";
  date.value = " ";
  remarks.value = " ";
  
  var table = document.getElementById('displayTable');

  var newRow = table.insertRow(row);

  var cell1 = newRow.insertCell(0);
  var cell2 = newRow.insertCell(1);
  var cell3 = newRow.insertCell(2);
  var cell4 = newRow.insertCell(3);

  cell1.innerHTML = name
  cell2.innerHTML = date
  cell3.innerHTML = amount
  cell4.innerHTML = remarks
  
  selectedRow()


  row++;




}

//adding total amount function??
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
    <link
      href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css"
      rel="stylesheet"
    />
    <link
      href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
      rel="stylesheet"
    />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />

    <title>Expense Tracker</title>
  </head>
  <body>
    <h1 class="d-flex justify-content-center mb-5 mt-5">Expense Tracker</h1>
    <form class="form d-flex justify-content-center mb-5">
      <span class="fw-bolder m-1"
        >Name: <input class="m-1" id="inputName" type="text"
      /></span>
      <span class="fw-bolder m-1"
        >Date: <input class="m-1" id="inputDate" type="date"
      /></span>
      <span class="fw-bolder m-1"
        >Amount: <input type="number" class="totalAmount m-1" id="inputAmount"
      /></span>
      <span class="fw-bolder m-1"
        >Remarks <input class="m-1" id="inputRemarks" type="text"
      /></span>
      <button class="m-1" id="inputButton">
        <i class="icon-level-down fs-4"></i>
      </button>
      <!-- How to delete specific row -->
      <button class="m-1" type="button" id="deleteSelection">
        <i class="icon-remove-sign fs-4"></i>
      </button>
    </form>
    <table class="table m-5" id="displayTable">
      <thead>
        <tr id="numero">
          <th scope="col">
            <i class="icon-file-text fw-bolder fs-3"></i> Description
          </th>
          <th scope="col"><i class="icon-calendar fw-bolder fs-3"></i> Date</th>
          <th scope="col"><i class="icon-usd fw-bolder fs-3"></i> Amount</th>
          <th scope="col"><i class="icon-pencil fs-3"></i> Remarks</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <!-- //passing total amount?? -->
    <span class="d-flex justify-content-center"
      >Total: <input type="number" id="total" value="0" disabled
    /></span>

    <script src="script.js"></script>
  </body>
</html>

标签： javascriptfunctionsumrowsubtotal

解决方案

我创建了一个名为 total() 的函数，它计算“金额”列的总数并将其打印在输入 #total 中。

var entryButton = document.getElementById('inputButton')
const tbodyEl = document.querySelector("tbody");
var row = 1;

//click button event
entryButton.addEventListener('click', tableDisplay);

//input value and displaying information
function tableDisplay(e) {
  e.preventDefault()
  var name = document.getElementById('inputName').value;
  var amount = document.getElementById('inputAmount').value;
  var date = document.getElementById('inputDate').value;
  var remarks = document.getElementById('inputRemarks').value;
  
  document.getElementById('inputName').value = '';
  document.getElementById('inputAmount').value = '';
  document.getElementById('inputDate').value = '';
  document.getElementById('inputRemarks').value = '';
  
  if (!name || !amount || !date || !remarks) {
    alert("Please fill all the blanks")
    return;
  }

  name.value = " ";
  amount.value = " ";
  date.value = " ";
  remarks.value = " ";
  
  var table = document.getElementById('displayTable');

  var newRow = table.insertRow(row);

  var cell1 = newRow.insertCell(0);
  var cell2 = newRow.insertCell(1);
  var cell3 = newRow.insertCell(2);
  var cell4 = newRow.insertCell(3);

  cell1.innerHTML = name
  cell2.innerHTML = date
  cell3.innerHTML = amount
  cell4.innerHTML = remarks
  
  total()


  row++;
}

function total(){
    var table = document.getElementById('displayTable');
    let total = 0
    for(let i = 1; i<table.rows.length; i++){
        total+=Number(table.rows[i].cells[2].innerText)
    }
    const totalInput = document.getElementById('total')
    totalInput.value=total

}

推荐阅读