Is it possible to sum the values of td using querySelectorAll?

Question

Is it possible to sum the values of td using querySelectorAll?

Navigation

#1 by (4 votes)
#2 by (1 votes)

1

I wonder if it is possible to sum the values contained within the td using querySelectorAll? And show the result of the sum in span id="valor_total" as shown in the code below.

function somaTds() {
  var selecionados = [].slice.call(document.querySelectorAll('#tblEditavel vlr'));

  var total = selecionados.reduce(function(soma, el) {
    console.log(el.innerHTML);
    return soma + Number(el.value);
  }, 0);

  document.getElementById('valor_total').innerHTML = total.toLocaleString('pt-br', {
    minimumFractionDigits: 2,
    currency: 'BRL'
  });
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table table-condensed">
  <tr>
    <th>#</th>
    <th>Nome</th>
    <th>Valor</th>
  </tr>
  <tr>
    <td>3</td>
    <td>Casa</td>
    <td class="vlr">R$ 200,00</td>
  </tr>
  <tr>
    <td>89</td>
    <td>Loja</td>
    <td class="vlr">R$ 551,00</td>
  </tr>
  <tr>
    <td colspan="2">Total</td>
    <td><span id="valor_total">somando...</span></td>
</table>
<button class="btn btn-primary" name="btnSoma" onclick="somaTds()">Somar</button>

Clicking the Add button returns a value that is zeroed.

javascript

asked by anonymous 22.05.2017 / 18:04

2 answers

1

You need to convert the value "R$ 200,00" to be able to be converted by Number .

Use replace to remove R$ and transform , into . .

See:

var texto = 'R$ 200,00';

var numero = texto.replace(',', '.').replace('R$ ', '');


console.log(Number(numero));

console.log(Number(texto)); // aqui vai dar errado, vai dar NaN

22.05.2017 / 18:14

Transform DD / MM / YY into PHP timestamp Add minutes to Javascript

score 4 · Accepted Answer

Yes, quite possible. Note that you had a selector error, missing . in '#tblEditavel vlr' , and #tblEditavel in HTML. And if you're not using input you have to use 'innerHTML.'

You could do it like this:

function somaTds() {
  var selecionados = [].slice.call(document.querySelectorAll('#tblEditavel .vlr'));

  var total = selecionados.reduce(function(soma, el) {
    var numero = el.innerHTML.slice(3).replace(',', '.');
    return soma + Number(numero);
  }, 0);

  document.getElementById('valor_total').innerHTML = 'R$ ' + total.toLocaleString('pt-br', {
    minimumFractionDigits: 2,
    currency: 'BRL'
  });
}
somaTds();

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table id="tblEditavel" class="table table-condensed">
  <tr>
    <th>#</th>
    <th>Nome</th>
    <th>Valor</th>
  </tr>
  <tr>
    <td>3</td>
    <td>Casa</td>
    <td class="vlr">R$ 200,00</td>
  </tr>
  <tr>
    <td>89</td>
    <td>Loja</td>
    <td class="vlr">R$ 551,00</td>
  </tr>
  <tr>
    <td colspan="2">Total</td>
    <td><span id="valor_total">somando...</span></td>
</table>
<button class="btn btn-primary" name="btnSoma" onclick="somaTds()">Somar</button>