新行中父母及其子女的Jquery总和答案

【问题标题】：Jquery sum of parent and his childs in new row新行中父母及其子女的Jquery总和
【发布时间】：2018-07-18 20:46:35
【问题描述】：

我有项目成本的基本 html 表结构（table、tr、td）。有些项目包含子项目（子项目包含img属性）。

我想知道如何根据每个子元素中的 img 属性动态添加一个新行，该行汇总父（项目）及其子项目（子项目）的每列（所有月份和总计）的值.

当前状态：

我想要什么：

我尝试使用 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

【问题讨论】：

能否将您的 HTML 添加到问题中，以及您为自己解决此问题所做的任何尝试。
这张图片对我们帮助解决您的问题有什么好处？分享您的代码。
jsfiddle.net/08osno5n Image 将帮助您获取所有子项目（例如，我们可以使用 find 函数获取所有图像并基于该所有子项目及其父项目）。

标签： javascript jquery html-table

【解决方案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

【讨论】：