I want to add grand Total to table

Question

I am facing an issue with appending a row into a table's body. I wrote the whole logic part, but I cannot get the desired solution to work. I have a tablewith some rows and columns; I also have one button for calculating the total price of the items.

On button click I want to create a row showing the total price of the items.

Here is my code:

function calcTotal() {
  let sum = 0;
  let price = document.querySelectorAll(".price");
  for (let i = 0; i < price.length; i++) {
    sum = sum + parseInt(price[i].innerHTML);
  }
  console.log(sum);
  const tbody = document.getElementsByName("tbody");
  const row = document.createElement("tr");
  row.innerHTML = '' + Grand - Total + '' + sum + '';
  tbody[0].appendChild(row);

}









  Grocery List
  
    
      
        Sr. No.
        Title
        Price
      
    
    
      
        1
        Item-1
        100
      
      
        2
        Item-2
        200
      
      
        3
        Item-3
        2
      
      
        4
        Item-4
        1

user_18905807 · Answer

There are bunch of mistakes in the code:

You are adding "Grand Total" to the string without quotes so it is taking these as a variable
you need to use document.getElementsByTagName('tbody')

working solution:

function calcTotal() {
    let sum = 0;
    let price = document.querySelectorAll(".price");
    for(let i=0; i';
    tbody[0].appendChild(row);
}









    Grocery List
    
        
            
                Sr. No.
                Title
                Price
            
        
        
            
                1
                Item-1
                100
            
            
                2
                Item-2
                200
            
            
                3
                Item-3
                2
            
            
                4
                Item-4
                1

user_13183434 · Answer

I have added an Id to TBody and adjusted the javascript for this and i placed th Grand - added between the brackets.

HTML:









    Grocery List
    
        
            
                Sr. No.
                Title
                Price
            
        
        
            
                1
                Item-1
                100
            
            
                2
                Item-2
                200
            
            
                3
                Item-3
                2
            
            
                4
                Item-4
                1

javascript

function calcTotal() {
  let sum = 0;
  let price = document.querySelectorAll(".price");
  for (let i = 0; i < price.length; i++) {
    sum = sum + parseInt(price[i].innerHTML);
  }
  console.log(sum);
  const tbody = document.getElementById("body");
  console.log(tbody)
  const row = document.createElement("tr");
  row.innerHTML = ' Grand - Total ' + sum + '';
  tbody.appendChild(row);

}

user_2813224 · Answer

There's two problems:

tbody is null, the following is wrong:
```
document.getElementsByName("tbody");
```
The above would work for:
```
...
```
document.getElementsByTagName("tbody"); is the proper syntax.
The new added only has 2 but the rest of the table has 3 columns.

In the example below, a , a , a , and another are added. Also, clicks beyond the first click only updates the total and no duplicate .

Details are commented in example

// Bind click event to

user_2772605 · Answer

This worked for me. I used querySelector instead of getElementsByName so I had no array to deal with. If you have more than one tbody on the page you might consider giving them a unique id, or class that refers to what they are doing.

   function calcTotal() {
    let sum = 0;
    let price = document.querySelectorAll(".price");
    for (let i = 0; i < price.length; i++) {
      sum = sum + parseInt(price[i].innerHTML);
    }
    // const tbody = document.getElementsByName("tbody");
    const tbody = document.querySelector("tbody");
    const row = document.createElement("tr");
    window.r = row
    window.tbody = tbody
    row.innerHTML =
      "" +
      "Grand-Total" +
      '' +
      sum +
      "";
    // tbody[0].appendChild(row);
    tbody.appendChild(row);
  }

I left the original commented out so you can see what I changed

I want to add grand Total to table

4 Answers