javascript - HTML 表 JQuery 自动小时总计

Question

所以我有一个 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 为每个 job_code 类自动汇总“hrs”类。我为此使用的 JQuery 是:

var sum=0

$(".hrs").each(function(i) {
    $.each(".job_code") {
    sum = sum + parseInt($(this).text());
    }

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

不幸的是，上面的 JQuery 无法正常工作。我需要它来运行 job_classes 并对类似的进行总计。所以它应该显示如下内容:

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

非常感谢任何帮助或建议。谢谢。

Answer 1

要获取值，您可能需要使用 $.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>

Sample Fiddle链接在这里。