使用 JQuery 的 HTML 求和

Question

所以我有一个显示查询结果的 HTML 表格。表格示例如下：

<div class="timecard">
<tr class = "display-even-row">
    <td align="left" style="color:#000099">2400-Duffy's</td>
    <td align="left" class="hrs">4</td>
<tr class = "display-odd-row">
    <td align="left" style="color:#009900">1500-Orchard</td>
    <td align="left" class="hrs">2</td>
</div>

我想分别为 2400-Duffy 的记录和 1500-orchard 的记录合计“hrs”类。以下是我尝试使用的 JQuery 语句。

var sum=0

$(".hrs").each(function(i) {
    if($('style') == 'color#000099') {
        sum = sum + parseInt($(this).text());
    }else if ($('style') == 'color#009900' {
        sum2 = sum + parseInt($(this).text());
});

$(".total").append("Total Duffy hours: " + sum);
$(".total").append("Total Orchard hours: " + sum2);

但是，以上内容无法正常工作，老实说，我正在尝试使其自动化程度更高，因为它具有不止一个“工作代码”，而不仅仅是上面列出的两个。任何建议都会很棒。谢谢。

Answer 1

如果您想要一个更自动化的方法，那就创建吧！

$.fn.sum = function() {
    var sum=0;
    $(this).each(function() {
        sum += Number($(this).text().trim());
    });

    return sum;
}

现在使用你的函数。使用类而不是样式。例如 duffy 类必须使颜色而不是样式。编写您的任意选择器并计算总和。

var sum = $(".duffy .hours").sum();

Answer 2

查看此http://jsfiddle.net/MnJ35/1/ 并使用此代码

var sum=0

$(".hrs").each(function(i) {
    if($(this).prev('td').css('color')=='rgb(0, 153, 0)') {
    sum = sum + parseInt($(this).text());
    }
});

$(".total").append("Total Duffy hours: " + sum);

Answer 3

Your html code is not valid .because of there is not table tag . 

Working Demo

html代码

<div class="timecard">
    <table>
<tr class = "display-even-row">
    <td align="left" style="color:#000099">2400-Duffy's</td>
    <td align="left" class="hrs">4</td>
      </tr>
<tr class = "display-odd-row">
    <td align="left" style="color:#009900">1500-Orchard</td>
    <td align="left" class="hrs">2</td>
    </tr>
    </table>
</div>

JS

    var sum=0;
    var sum2=0;
    $(".hrs").each(function(i){

        var rgb=$(this).prev("td").css("color");
        var hxColor=hexc(rgb);

        if (hxColor == '#000099'){

            sum = sum + parseInt($(this).text())
        }else if (hxColor == '#009900' ){
            sum2 = sum2 + parseInt($(this).text());

        }

});

function hexc(colorval) {
    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i]).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
    color = '#' + parts.join('');

    return color;
}