如何对表格行中的所有总数求和？ JS

Question

newbie here.. I was looking for some kind of function that can total the amount of one input type in table which is the Amount input.新手在这里.. 我正在寻找某种功能，可以总计表中一种输入类型的数量，即金额输入。 I've tried parseInt function to the amount and its cell but it doesn't work.我已经尝试了 parseInt 函数的数量和它的单元格，但它不起作用。 I think its getting only the .innerHTML but not what it contains which should be the number.我认为它只获取 .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>

Answer 1

I created a function called total(), which calculates the total of the column 'Amount' and prints it inside the input #total.我创建了一个名为 total() 的函数，它计算“Amount”列的总数并将其打印在输入 #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

}

如何对表格行中的所有总数求和？ JS

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-11-04 16:05:36

如何对表格行中的所有总数求和？ JS

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-11-04 16:05:36

解决方案1
1 已采纳 2021-11-04 16:05:36