Сумма JQuery родителя и его дочерних элементов в новой строке

Question

У меня есть базовая структура таблицы html (таблица, tr, td) затрат на проекты. Некоторые проекты содержат подпроекты (подпроекты содержат атрибут img).

Мне интересно, как можно динамически добавить новую строку, которая суммирует значения для каждого столбца (все месяцы и итоги) для родителя (Project) и его дочерних элементов (подпроект) на основе атрибута img, который находится в каждом дочернем объекте элемент.

Текущее состояние: Current state] http://i59.tinypic.com/ei2p3m.jpg

Что я хочу: My wish] http://i62.tinypic.com/2wh03eq.png

Я попытался с помощью функции JQuery карты, но без успеха. Пожалуйста, помогите мне.

<table cellspacing='15'> 
    <thead><tr> 
     <th>Project</th> 
     <th>Jan</th> 
     <th>Feb</th> 
     <th>Mar</th> 
     <th>Apr</th> 
     <th>May</th> 
     <th>Jun</th> 
     <th>Jul</th> 
     <th>Aug</th> 
     <th>Sep</th> 
     <th>Oct</th> 
     <th>Nov</th> 
     <th>Dec</th> 
     <th>Totals</th> 
    </tr> 
    </thead> 
    <tr> 
    <td>Project 1</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     <td>7</td> 
     <td>8</td> 
     <td>9</td> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
     <td>78</td> 
    </tr> 
    <tr> 
    <td>Project 2</td> 
    <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     <td>7</td> 
     <td>8</td> 
     <td>9</td> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
     <td>78</td> 
    </tr> 
    <tr> 
    <td><img src='http://healthsidekick.com/chat71/mobile-client/img/icon-go-arrow.png'></img>Subproject 1 of Proejct 2</td> 
     <td>1</td> 
     <td>0.6</td> 
     <td>0.7</td> 
     <td>0.8</td> 
     <td>0.9</td> 
     <td>1</td> 
     <td>0.1</td> 
     <td>0.11</td> 
     <td>0.12</td> 
     <td>0.13</td> 
     <td>0.14</td> 
     <td>2</td> 
     <td>7.1</td> 
    </tr> 
    <tr> 
    <td><img src='http://healthsidekick.com/chat71/mobile-client/img/icon-go-arrow.png'></img>Subproject 2 of Proejct 2</td> 
     <td>0.9</td> 
     <td>0.6</td> 
     <td>0.7</td> 
     <td>0.8</td> 
     <td>0.9</td> 
     <td>2</td> 
     <td>0.1</td> 
     <td>0.2</td> 
     <td>0.3</td> 
     <td>0.4</td> 
     <td>0.5</td> 
     <td>0.6</td> 
     <td>5</td> 
    </tr> 
    <tr> 
    <td> Proejct 3</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>—</td> 
     <td>—</td> 
     <td>—</td> 
     <td>4</td> 
     <td>—</td> 
     <td>—</td> 
     <td>—</td> 
     <td>—</td> 
     <td>—</td> 
     <td>5</td> 
    </tr> 
</table> 

JSFIDDLE link to table structure

Answer 1

Может быть, есть более простое решение, но я сделал все возможное. Это то, что вы можете использовать:

var results = [], 
    insertResultsAfter = [], 
    trIndex; 
$('table tr').each(function(index, value){ 
    if ($(this).find('td:first').text().trim().substring(0, 7) == 'Project') { 
     trIndex = index; 
     results[trIndex] = []; 
     $(this).find('td').each(function(tdIndex, value){ 
      results[trIndex].push(parseFloat($(this).text())); 
      insertResultsAfter[trIndex] = trIndex; 
     }); 
    } else if ($(this).find('td:first').text().trim().substring(0, 10) == 'Subproject') { 
     $(this).find('td').each(function(tdIndex, value){ 
      results[trIndex][tdIndex] += parseFloat($(this).text()); 
     }); 
     insertResultsAfter[trIndex] = index; 
    } 
}); 

var addedToIndex = 0; 
for (var key in results) { 
    $tr = $('<tr></tr>').addClass('bg').insertAfter($('table tr:eq(' + (insertResultsAfter[key] + addedToIndex) + ')')); 
    $.each(results[key], function(index2, valueForEachTd) { 
     $('<td></td>').text(valueForEachTd.toFixed(2)).appendTo($tr); 
    }); 
    addedToIndex++; 
} 

The updated demo