How do I get values contained in a table?

Question

How do I get values contained in a table?

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

1

I have a shopping cart where it provides the following information:

<tr class="rem1">
   <td class="invert">R$<span id="produto">270,00</span></td>
</tr>
<tr class="rem2">
   <td class="invert">R$<span id="produto">280,00</span></td>
</tr>
<tr class="rem3">
   <td class="invert">R$<span id="produto">290,00</span></td>
</tr>

Would you like to know how I can click the value of these products? I tried this way:

$('.value-plus').on('click', function() {
            valor = document.getElementById("produto").innerHTML;
            trocar = valor.replace(",", ".");
            alert(trocar);
}

But when I click, it only comes with the first product (200.00).

javascript jquery

asked by anonymous 17.03.2017 / 13:43

3 answers

2

It's not ideal to put a same ID for multiple elements, as @Sergio explains in that response .

I modified your code and got the values using querySelectorAll , I would like this:

$('.value-plus').on('click', function() {
    var valores = document.querySelectorAll("table tr td span");
    for (i = 0; i < valores.length; i++) {
        console.log(valores[i].innerHTML);
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><trclass="rem1">
      <td class="invert">R$<span>270,00</span></td>
   </tr>
   <tr class="rem2">
      <td class="invert">R$<span>280,00</span></td>
   </tr>
   <tr class="rem3">
      <td class="invert">R$<span>290,00</span></td>
   </tr>
</table>
<button class='value-plus'>Pegar Valores</button>

17.03.2017 / 13:54

1

id is an attribute that can not be repeated, in addition to not being semantic, document.getElementById will always return only one element. I suggest changing to any other selector (like class for example):

$('.value-plus').on('click', function() {
  let elementos = document.getElementsByClassName("produto");
  let valores = [];
  for (let i = 0; i < elementos.length; i++) {
    valores.push(elementos[i].innerHTML.replace(",", "."));
  };
  console.log(valores);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><trclass="rem1">
  <td class="invert">R$<span class="produto" id="produto">270,00</span></td>
</tr>
<tr class="rem2">
  <td class="invert">R$<span class="produto" id="produto">280,00</span></td>
</tr>
<tr class="rem3">
  <td class="invert">R$<span class="produto" id="produto">290,00</span></td>
</tr>
<button class="value-plus">Checar</button>

17.03.2017 / 13:54

Connection Error C # PostGree - Locaweb [duplicate] Upload to Drive [closed]

score 1 · Accepted Answer

The id attribute in html should be unique, so this only brings the first.

You could select your items and from that selection. you could walk through the $.each(function(index, item){}) method of jQuery.

It would look like this:

$('.value-plus').on('click', function(){

  var lista = $('.invert > span');
  
  $.each(lista, function(index,item){
  
    valor = $(item).text();
    trocar = valor.replace(",",".");
    alert(trocar);
  
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><trclass="rem1">
<td class="invert">R$<span id="produto">270,00</span></td>
</tr>
<tr class="rem2">
<td class="invert">R$<span id="produto">280,00</span></td>
</tr>
<tr class="rem3">
<td class="invert">R$<span id="produto">290,00</span></td>
</tr>
</table>
<button id="myButton" class="value-plus">Pegar Valores</button>