Question

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

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

现状：

Current state]

我想要的是什么：

My wish]

我尝试使用jQuery map函数但没有成功。请帮帮我。

<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

Jquery总和父母和他的孩子在新的行

1 个答案: