How do I sum the price column from HTML table using JavaScript?

Question

I am trying to add Price from table column to a total. I am having problem adding values such as 10.00 or 5.99. I am able to calculate prices with int values, but not with values 10.00 or 5.99, etc.

Here is what I have below.

var table = document.getElementById("myTable"),
  sumVal = 0;
for (var i = 1; i < table.rows.length; i++) {
  sumVal = sumVal + parseF(table.rows[i].cells[2].innerHTML);
}

document.getElementById("val").innerHTML = "SubTotal =" + sumVal;
console.log(sumVal);

<table id="myTable">
  <tr>
    <th>Item</th>
    <th>Price</th>
    <th>Remove</th>
  </tr>
  <tr>
    <td>Hoddie</td>
    <td class="count-me">15.00</td>
    <td><button onClick="myFunction()">Remove</button></td>
  </tr>
  <tr>
    <td>Nike Cap</td>
    <td class="count-me">10.99</td>
    <td><button onClick="myFunction()">Remove</button></td>
  </tr>
</table>
<span id="val"></span>

Answer 1

var cell = document.getElementsByClassName("count-me");
var val = 0;
var i = 0;
while (cell[i] != undefined) {
  val += parseFloat(cell[i].innerHTML);
  i++;
} //end while
document.getElementById("val").innerHTML = parseFloat(val).toFixed(2);
console.log(parseFloat(val).toFixed(2));

<table id="myTable">
  <tr>
    <th>Item</th>
    <th>Price</th>
    <th>Remove</th>
  </tr>
  <tr id="">
    <td>Hoddie</td>
    <td class="count-me">15.00</td>
    <td>
      <button onClick="myFunction()">Remove</button>
    </td>
  </tr>
  <tr>
    <td>Nike Cap</td>
    <td class="count-me">10.99</td>
    <td>
      <button onClick="myFunction()">Remove</button>
    </td>
  </tr>
</table>
<span id="val"></span>

Answer 2

updateSubTotal(); // Initial call

function updateSubTotal() {
  var table = document.getElementById("myTable");
  let subTotal = Array.from(table.rows).slice(1).reduce((total, row) => {
    return total + parseFloat(row.cells[1].innerHTML);
  }, 0);
  let subTotal2 = Array.from(table.rows).slice(1).reduce((total, row) => {
    return total + parseFloat(row.cells[2].innerHTML);
  }, 0);
  document.getElementById("val").innerHTML = "SubTotal = $" + subTotal.toFixed(2);
 document.getElementById("val1").innerHTML = subTotal2.toFixed(2);
}

function onClickRemove(deleteButton) {
  let row = deleteButton.parentElement.parentElement;
  row.parentNode.removeChild(row);
  updateSubTotal(); // Call after delete
}

#myTable td {
  padding: 0.25em;
}

#val {
  display: block;
  margin-top: 0.5em;
}

<table id="myTable">
  <tr>
    <th>Item</th>
    <th>Price</th>
    <th>M2</th>
    <th>Remove</th>
  </tr>
  <tr>
    <td>Hoodie</td>
    <td class="count-me">15.00</td>
    <td class="count-me">34.00</th>
    <td><button onClick="onClickRemove(this)">Remove</button></td>
  </tr>
  <tr>
    <td>Nike Cap</td>
    <td class="count-me">10.99</td>
    <td class="count-me">22.34</th>
    <td><button onClick="onClickRemove(this)">Remove</button></td>
  </tr>
</table>
<span id="val"></span>
<span id="val1"></span>

Answer 3

You have three issues:

1. You are grabbing the wrong cell index, indices start at 0:
   • table.rows[i].cells[1]
2. You need to call the correct parse function:
   • parseFloat(table.rows[i].cells[1].innerHTML);
3. You need to format your output:
   • "SubTotal = $" + sumVal.toFixed(2);

Update: Added functionality for removing rows.

updateSubTotal(); // Initial call

function updateSubTotal() {
  var table = document.getElementById("myTable");
  let subTotal = Array.from(table.rows).slice(1).reduce((total, row) => {
    return total + parseFloat(row.cells[1].innerHTML);
  }, 0);
  document.getElementById("val").innerHTML = "SubTotal = $" + subTotal.toFixed(2);
}

function onClickRemove(deleteButton) {
  let row = deleteButton.parentElement.parentElement;
  row.parentNode.removeChild(row);
  updateSubTotal(); // Call after delete
}

#myTable td {
  padding: 0.25em;
}

#val {
  display: block;
  margin-top: 0.5em;
}

<table id="myTable">
  <tr>
    <th>Item</th>
    <th>Price</th>
    <th>Remove</th>
  </tr>
  <tr>
    <td>Hoodie</td>
    <td class="count-me">15.00</td>
    <td><button onClick="onClickRemove(this)">Remove</button></td>
  </tr>
  <tr>
    <td>Nike Cap</td>
    <td class="count-me">10.99</td>
    <td><button onClick="onClickRemove(this)">Remove</button></td>
  </tr>
</table>
<span id="val"></span>

Answer 4

You are accessing the incorrect array element and also need to use parseFloat

The cells array is zero-based so you need to use cells[1] to access the second column:

var table = document.getElementById("myTable"),
  sumVal = 0;
for (var i = 1; i < table.rows.length; i++) {
  sumVal = sumVal + parseFloat(table.rows[i].cells[1].innerHTML);
}

document.getElementById("val").innerHTML = "SubTotal =" + sumVal;
console.log(sumVal);

<table id="myTable">
  <tr>
    <th>Item</th>
    <th>Price</th>
    <th>Remove</th>
  </tr>
  <tr>
    <td>Hoddie</td>
    <td class="count-me">15.00</td>
    <td><button onClick="myFunction()">Remove</button></td>
  </tr>
  <tr>
    <td>Nike Cap</td>
    <td class="count-me">10.99</td>
    <td><button onClick="myFunction()">Remove</button></td>
  </tr>
</table>
<span id="val"></span>