Html - How sum values of a table with decimals

LuisJose
February 12, 2024
72 views
0 votes
2 Answers

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.

Answers

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>

Use an European country to format this way : 1.200,00 (like Germany)

also Intl.NumberFormat accept
minimumFractionDigits has option
(or maximumFractionDigits )

const
  inSuma     =  document.getElementById('suma')
, cssSelect  = '#myTable tbody tr td:nth-child(3)'
, optionIntl = { minimumFractionDigits: 2 }
, getNum  = val => Number(val.replace(/./g,'').replace(',','.'))
  ;
total()
  ;
function total()
  {
  let sum = [...document.querySelectorAll(cssSelect)]
          .reduce( (s,cell) => s + getNum(cell.textContent), 0)
          ;
  inSuma.value = new Intl.NumberFormat('de-DE',optionIntl).format(sum);
  }

#myTable tbody tr td:nth-child(3) { color: blue; }

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

<table id="myTable">
  <thead>
    <tr><td>N</td><td>NOMBRE</td><td>MONTO</td></tr>
  <thead>
  <tbody>
    <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>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How sum values of a table with decimals

Answers