Javascript HTML表格JQuery自动小时总数

因此，我有一个HTML表，显示查询结果。表格样本如下：

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

不幸的是，上面的JQuery不能正常工作。我需要它来完成作业课程，并将类似的课程汇总起来。因此，它应该显示如下内容：

Total 2400-Duffy hours = 4
Total 1500-Orchard hours = 6
Total 32-Black hours = 1

非常感谢您的帮助或建议。谢谢。

试试看

$('<div/>', {
    'id': 'test'
}).appendTo('body');

$('.job_code').each(function () {
    var xText = this.textContent;
    var xHrs = $(this).next()[0].textContent;
    var targetSpan = $('#test').find('span[test="' + xText + '"]');
    if (targetSpan.length) {
        targetSpan.contents()[1].nodeValue = " " + (parseInt(targetSpan.contents()[1].nodeValue, 10) + parseInt(xHrs, 10));
    } else {
        $('<span/>', {
            'test': xText,
            'text': " " + xHrs
        }).appendTo($('#test')).prepend($('<span/>', {
            'text': xText
        })).after('<br/>');
    }
});

$（“”{
“id”：“test”
}).附于（“主体”）；
$（'.job_code'）。每个（函数（）{
var xText=this.textContent；
var xHrs=$（this）.next（）[0].textContent；
var targetSpan=$（'#test'）.find（'span[test=“”+xText+“]）；
if（目标跨度长度）{
targetSpan.contents（）[1].nodeValue=“”+（parseInt（targetSpan.contents（）[1].nodeValue，10）+parseInt（xHrs，10））；
}否则{
$('', {
“测试”：xText，
“文本”：“”+xHrs
}).appendTo（$（'#test'））.prepend（$（''）{
“文本”：xText
})).在（“
”）之后；
}
});

试试看..因为您的要求是基于名称来求和

 var Duffy  = 0;
    var Orchars = 0;
    var Black=0;
    $(".hrs").each(function(i){

        var value=$(this).prev("td").text();
       var name= value.split("-");


    if (name[1] == "Duffy's"){

            Duffy = Duffy + parseInt($(this).text())
        }else if (name[1] == 'Orchard' ){
            Orchars = Orchars + parseInt($(this).text());

        }else if (name[1] == 'Black' ){
            Black = Black + parseInt($(this).text())
        } 



    });
      alert("Duffy"+Duffy+"  Orchars"+Orchars+"  Black"+Black);

---

要获取值，可能需要使用

$.each（）

对所有值求和。首先，你需要得到所有的工作代码（这样我可以是动态的，因为将来可能会添加一些工作代码），然后在收集之后，删除重复的代码，然后对它们进行汇总。考虑这个快速肮脏的例子：

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

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    var temp = [];
    $('.job_code').each(function(index, element){
        var text = $(this).text();
        temp.push(text);
    });

    // remove duplicates
    var job_code = [];
    $.each(temp, function(index, element){
        if($.inArray(element, job_code) === -1) job_code.push(element);
    });

    var sum = {};
    $.each(job_code, function(index, element){
        var total = 0;
        $('.job_code:contains('+element+')').each(function(key, value){
            total += parseInt($(this).next('td.hrs').text());
            sum[index] = {'job_code' : element, 'total': total};
        });
    });

    console.log(sum);

});
</script>

在里面
2400达菲
4.
在里面
1500果园
2.
在里面
32黑色
1.
在里面
1500果园
4.
$（文档）.ready（函数（）{
var-temp=[]；
$（'.job_code'）。每个（函数（索引，元素）{
var text=$（this.text（）；
临时推送（文本）；
});
//删除重复项
var作业代码=[]；
$。每个（临时、功能（索引、元素）{
if（$.inArray（元素，作业代码）=-1）作业代码.push（元素）；
});
var和={}；
$.each（作业代码、函数（索引、元素）{
var合计=0；
$（'.job_代码：包含（'+element+'））。每个（函数（键、值）{
total+=parseInt（$（this.next（'td.hrs'）.text（））；
sum[index]={'job_code'：元素，'total'：total}；
});
});
控制台日志（总和）；
});

---

链接此处。

谢谢。有没有一种方法可以不像您那样声明Duffy、Orchars或Blacks变量，并使用for-each循环？有30多个工作代码，我不认为为每个代码创建一个变量是一个选项。@h3tr1ck创建每个变量并不是更好的解决方案，看看我更新的答案。绝对令人惊讶。非常感谢你。

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

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    var temp = [];
    $('.job_code').each(function(index, element){
        var text = $(this).text();
        temp.push(text);
    });

    // remove duplicates
    var job_code = [];
    $.each(temp, function(index, element){
        if($.inArray(element, job_code) === -1) job_code.push(element);
    });

    var sum = {};
    $.each(job_code, function(index, element){
        var total = 0;
        $('.job_code:contains('+element+')').each(function(key, value){
            total += parseInt($(this).next('td.hrs').text());
            sum[index] = {'job_code' : element, 'total': total};
        });
    });

    console.log(sum);

});
</script>