Блог

Я хотел бы сформировать сумму таблицы, в которой существует значение, и отобразить их в отдельном td.

Таблица, с которой я работаю, содержит некоторый контент, который не является числами, а номера строк таблицы являются переменными.

 names        | val 1 | val 2  | val n | val n 1 | sum
name 1       | 0,00  |  12,00 | -3,00 | 1,00    |
another name | 1,00  |   1,00 |  1,00 | 0,00    |
name x       | 1,00  | no int |  2,00 | 0,00    |
 

каждый td со значением для суммирования выглядит <td> some text <span class="tosum"> 1,00 </span></td> следующим образом .
столбец суммы выглядит как <td class="finalsum"></td> и пуст с самого начала.

Поскольку я могу сосредоточиться на элементах с .tosum каждой строкой, я думал о чем-то подобном:

 $(document).ready(){
    sumTable();
});

function sumTable(){
    var sum = 0;
    
    $("tr").each(function(){
        sum  = parseFloat($(this).find(".tosum").text().replace(',', '.'));
        $(this).find("td.finalsum").text(sum);
    
        //console.log($(this).find(".tosum").text()   " // ");

    });
}
 

попытка добавить значения приводит к появлению NaN в строке суммы.

Во-первых, обратите внимание, что синтаксис вашего обработчика document.ready неверен. Это должно быть $(document).ready(function() { /* your code here */ });

Что касается вопроса суммирования рядов, то вам понадобятся две петли. Один через все tr элементы, а другой через цель td внутри него. Затем вы можете просто разобрать текстовые значения с плавающей запятой после замены , символов на . и добавить к текущему итогу. Кроме того, вы должны обновить .totalsum после выполнения цикла через td . Попробуй это:

 jQuery($ => {
  sumTable();
});

function sumTable() {
  $("tr").each((_, tr) => {  
    let sum = 0, $tr = $(tr);
    $tr.children('td:not(:first, .finalsum)').each((_, td) => {
      sum  = parseFloat($(td).find('.tosum').text().replace(',', '.')) || 0;    
    });
    $tr.children('.finalsum').text(sum);
  });
} 

 .finalsum { 
  text-align: right; 
  font-weight: bold;
  color: #C00;
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>names</td>
    <td>val 1</td>
    <td>val 2</td>
    <td>val n</td>
    <td>val n 1</td>
    <td>sum</td>
  </tr>
  <tr>
    <td>name 1</td>
    <td>some text <span class="tosum">0,00</span></td>
    <td>some text <span class="tosum">12,00</span></td>
    <td>some text <span class="tosum">-3,00</span></td>
    <td>some text <span class="tosum">1,00</span></td>
    <td class="finalsum"></td>
  </tr>
  <tr>
    <td>another name</td>
    <td>some text <span class="tosum">1,00</span></td>
    <td>some text <span class="tosum">1,00</span></td>
    <td>some text <span class="tosum">1,00</span></td>
    <td>some text <span class="tosum">0,00</span></td>
    <td class="finalsum"></td>
  </tr>
  <tr>
    <td>name x</td>
    <td>some text <span class="tosum">1,00</span></td>
    <td>some text <span class="tosum">no int</span></td>
    <td>some text <span class="tosum">2,00</span></td>
    <td>some text <span class="tosum">0,00</span></td>
    <td class="finalsum"></td>
  </tr>
</table>