How sum values of a table with decimals

Question

I have a project in HTML and JS whit a table and input

<input type="text" id="suma">


<table id="myTable">
<tbody>
<tr>
<td>N</td>
<td>NOMBRE</td>
<td>MONTO</td>
</tr>
<tr>
<td>1</td>
<td>Alba</td>
<td>1.200,00</td>
</tr>
<tr>
<td>2</td>
<td>Andrea</td>
<td>1.200,00</td>
</tr>
<tr>
<td>3</td>
<td>Jose</td>
<td>1.200,00</td>
</tr>
</tbody>
</table>

function total(){
    var table = document.getElementById('myTable');
    let total = 0
    for(let i = 1; i<table.rows.length; i++){
        total+=Number(table.rows[i].cells[2].innerText)
    }
    const totalInput = document.getElementById('suma')
    totalInput.value=Intl.NumberFormat('en-EN').format(total)

}

The script can calculate the total of the MONTO field in the input, but the result is NaN because the values have decimals and thousand separator. The question is, How i can make for the script sum includes decimals and thousands separator? that is to say, with this format: 1.200,00

Thank you.

Answer 1

you just forgot to handle punctuation and number mask. Basically remove all "." and replace the "," for a single "." representing the float part.

function removeNumberMask(value) {
  return value.replaceAll('.', '').replace(',', '.')
}

function total() {
  var table = document.getElementById('myTable');
  let total = 0
  for (let i = 1; i < table.rows.length; i++) {
    const rawNumber = removeNumberMask(table.rows[i].cells[2].innerText)
    total += Number(rawNumber)
  }
  const totalInput = document.getElementById('suma')
  totalInput.value = Intl.NumberFormat('en-EN').format(total)
}

total();

<input type="text" id="suma">


<table id="myTable">
  <tbody>
    <tr>
      <td>N</td>
      <td>NOMBRE</td>
      <td>MONTO</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Alba</td>
      <td>1.200,00</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Andrea</td>
      <td>1.200,00</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Jose</td>
      <td>1.200,00</td>
    </tr>
  </tbody>
</table>