Somme HTML en utilisant JQuery

Question

J'ai donc un tableau HTML affichant les résultats d'une requête. Un échantillon de la table est comme suit:

<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> 

Je veux un total de « heures » classe séparément pour les dossiers de la 2400-Duffy et les records de 1500 verger. Ce qui suit est l'instruction JQuery que j'essaie d'utiliser.

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); 

Cependant, ne fonctionne pas correctement et honnêtement je ci-dessus essaie d'automatiser plus car il a plus d'un « code de travail » que juste les deux énumérés ci-dessus. Toute suggestion sera appréciée. Merci.

Answer 1

Si vous voulez une méthode plus automatisée, créez-la!

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

    return sum; 
} 

Utilisez maintenant votre fonction. Utilisez la classe au lieu du style. Par exemple, classe duffy doit faire la couleur pas le style. écrivez votre sélecteur d'arbitres et calculez la somme.

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

Answer 2

voir ce http://jsfiddle.net/MnJ35/1/ et utiliser ce code

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 code

<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; 
}