Возьмите каждый TD, затем отформатируйте его в валюту

Question

Я довольно новичок в JS и после поиска по сети, документам, друзьям и другим вопросам здесь по stackoverflow, которые я получил до этого момента. Теперь я не могу пройти мимо.

$(document).ready(function() {
  var $table = $("table.valores");

  if ($table.length > 0) {
    var ValorTh = $("th.header:contains('Valor')");
    var ValorColumnIndex = $(ValorTh).index();
    var Valor_rows = $($table).find('tr');

      $(Valor_rows).each(function() {
      $(this).find('td').eq(ValorColumnIndex).toLocaleString('pt-BR',{style:'currency', currency: 'BRL'});
    });

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="valores">
<thead><th class="header">Valor</th></thead>
<tbody>
<tr>
<td>15.00</td>
</tr>
<tr>
<td >16.00</td>
</tr>
<tr>
<td >17.00</td>
</tr>
<tr>
<td >18.00</td>
</tr>
<tr>
<td >19.00</td>
</tr>
<tr>
<td >20.00</td>
</tr>

</tbody>
</table>

Я не могу заставить работать следующее и правильно отформатировать значение td: C

toLocaleString('pt-BR',{style:'currency',  currency: 'BRL'});

Answer 1

Это потому, что toLocaleString является прототипом Number, а не string

$(document).ready(function() {
  var $table = $("table.valores tbody");
  
  $table.find("td").each(function(i,el){
    try{
        $(el).text(parseFloat($(el).text()).toLocaleString('pt-BR', {style:'currency', currency: 'BRL'}));
        }catch(e){
          //not a number 
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="valores">
<thead><th class="header">Valor</th></thead>
<tbody>
<tr>
<td>15.00</td>
</tr>
<tr>
<td >16.00</td>
</tr>
<tr>
<td >17.00</td>
</tr>
<tr>
<td >18.00</td>
</tr>
<tr>
<td >19.00</td>
</tr>
<tr>
<td >20.00</td>
</tr>

</tbody>
</table>

Answer 2

Вам необходимо установить содержимое td s. Теперь вы не меняете содержимое элементов. Попробуйте это:

$(document).ready(function() {
  var $table = $("table.valores");

  if ($table.length > 0) {
    var ValorTh = $("th.header:contains('Valor')");
    var ValorColumnIndex = $(ValorTh).index();
    var Valor_rows = $($table).find('tr');

      $(Valor_rows).each(function() {
        var $td = $(this).find('td').eq(ValorColumnIndex);
        var formatted = Number($td.text()).toLocaleString('pt-BR', {style:'currency', currency: 'BRL'});
        $td.text(formatted); // <-- here, you need to set the value
      });

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="valores">
<thead><th class="header">Valor</th></thead>
<tbody>
<tr>
<td>15.00</td>
</tr>
<tr>
<td >16.00</td>
</tr>
<tr>
<td >17.00</td>
</tr>
<tr>
<td >18.00</td>
</tr>
<tr>
<td >19.00</td>
</tr>
<tr>
<td >20.00</td>
</tr>

</tbody>
</table>