таблица цикла jquery при добавлении значений

Question

У меня есть следующая таблица, которая заполняется php и содержит значения в столбцах «Калории», «Протеины», «Карбоны» и «Жиры». Я пытаюсь написать сценарий jquery, который будет проходить через таблицу и суммировать все значения калорий, значения белка, значения углеводов и жиров. Я очень новичок в jquery, поэтому у меня немного тяжелое время. Вот структура:

<table id="planner_table" class="display"> 
      <thead class="planner_table_head"> 
      <tr> 
       <th class="planner_th">Meal Name</td> 

       <th class="planner_th">Calories</th> 

       <th class="planner_th">Protein</th> 

       <th class="planner_th">Carbs</th> 

       <th class="planner_th">Fats</th> 
      </tr> 
      </thead> 

      <tbody> 
      <?php $dao->fillPlanner($_SESSION['user_id']); ?> 
      </tbody> 
     </table> 

это то, что элементы, которые выглядят как генерируются PHP:

echo '<tr>'; 
echo '<td class="centered">' . content . '</td>'; 
echo '<td class="centered cals">' . content . '</td>'; 
echo '<td class="centered prot">' . content . '</td>'; 
echo '<td class="centered carbs">' . content . '</td>'; 
echo '<td class="centered fats">' . content . '</td>'; 
echo '</tr>'; 

любая помощь приветствуется. Благодаря

Answer 1

В общей сложности количество калорий в колонке калорий, сделать это:

var totalCals = 0; 

$('td.cals').each(function(){ 
    totalCals += parseInt($(this).html(), 10); 
}); 

Это предполагает только содержание внутри каждого только число будет добавлен.

Вы можете сделать то же самое и для других типов столбцов.

Answer 2

Вы можете использовать функцию jQuery .each() для итерации через элементы dom, а вот это <tr>. Так в основном, здесь есть способ сделать это (я не пишу его полностью, так что вы будете закончить его самостоятельно):

$('#planner_table tr').each(function(i) { 
    var cals = $('td.cals', this); 
    var prot = $('td.prot', this); 
    var carbs = $('td.carbs', this); 
    var fats = $('td.fats', this); 
});