I want to add grand Total to table-CodePudding

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 = '<td>'   Grand - Total   '</td><td data-ns-test="grandTotal">'   sum   '</td>';
  tbody[0].appendChild(row);

}

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <h1>Grocery List</h1>
  <table>
    <thead>
      <tr>
        <th>Sr. No.</th>
        <th>Title</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Item-1</td>
        <td data-ns-test="price" >100</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Item-2</td>
        <td data-ns-test="price" >200</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Item-3</td>
        <td data-ns-test="price" >2</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Item-4</td>
        <td data-ns-test="price" >1</td>
      </tr>
    </tbody>
  </table>
  <button onClick='calcTotal()'>Total</button>
  <script src="app.js"></script>
</body>

</html>

CodePudding user response：

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 =
      "<td>"  
      "Grand-Total"  
      '</td><td data-ns-test="grandTotal">'  
      sum  
      "</td>";
    // tbody[0].appendChild(row);
    tbody.appendChild(row);
  }

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

CodePudding user response：

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<price.length; i  ){
        sum = sum   parseInt(price[i].innerHTML);
    }

    const tbody = document.getElementsByTagName("tbody");
    const row = document.createElement("tr");
    row.innerHTML = '<td>Grand-Total </td><td colspan="2" data-ns-test="grandTotal">'  sum  '</td>';
    tbody[0].appendChild(row);
}

<!DOCTYPE html>
<html>

<head>

</head>

<body>
    <h1>Grocery List</h1>
    <table>
        <thead>
            <tr>
                <th>Sr. No.</th>
                <th>Title</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Item-1</td>
                <td data-ns-test="price" >100</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Item-2</td>
                <td data-ns-test="price" >200</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Item-3</td>
                <td data-ns-test="price" >2</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Item-4</td>
                <td data-ns-test="price" >1</td>
            </tr>
        </tbody>
    </table>
    <button onClick='calcTotal()'>Total</button>
    <script src="app.js"></script>
</body>

</html>

CodePudding user response：

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

HTML:

<!DOCTYPE html>
<html>

<head>

</head>

<body>
    <h1>Grocery List</h1>
    <table>
        <thead>
            <tr>
                <th>Sr. No.</th>
                <th>Title</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody id="body">
            <tr>
                <td>1</td>
                <td>Item-1</td>
                <td data-ns-test="price" >100</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Item-2</td>
                <td data-ns-test="price" >200</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Item-3</td>
                <td data-ns-test="price" >2</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Item-4</td>
                <td data-ns-test="price" >1</td>
            </tr>
        </tbody>
    </table>
    <button onClick='calcTotal()'>Total</button>
</body>

</html>

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 = '<td> Grand - Total </td><td data-ns-test="grandTotal">'   sum   '</td>';
  tbody.appendChild(row);

}