Question

所以我有一个HTML表，如下所示。

<div class="timecard">
 <h3>tommytest</h3>

<table class="misc_items timecard_list" border="0" cellpadding="2" cellspacing="0" style="margin:0 auto;">
    <tbody>
        <tr class="display_row odd">
            <td align="left" class="job_code" style="color:#000099">2400-Orchard</td>
            <td align="right">9:47am</td>
            <td align="right">5/19/2014</td>
            <td align="right" class="hrs">01:00</td>
        </tr>
        <tr class="display_odd row">
            <td align="left" class="job_code" style="color:#000099">1200-Duffy's</td>
            <td align="right">12:37am</td>
            <td align="right">5/17/2014</td>
            <td align="right" class="hrs">2:00</td>
        </tr>
    </tbody>
</table>
</div>

<div class="timecard">
 <h3>testtest</h3>

<table class="misc_items timecard_list" border="0" cellpadding="2" cellspacing="0" style="margin:0 auto;">
    <tbody>
        <tr class="display_row odd">
            <td align="left" class="job_code" style="color:#000099">2400-Orchard</td>
            <td align="right">9:47am</td>
            <td align="right">5/19/2014</td>
            <td align="right" class="hrs">01:00</td>
        </tr>
        <tr class="display_odd row">
            <td align="left" class="job_code" style="color:#000099">1200-Duffy's</td>
            <td align="right">12:37am</td>
            <td align="right">5/17/2014</td>
            <td align="right" class="hrs">2:00</td>
        </tr>
    </tbody>
</table>
</div>
<div id="total"></div>

然后我有一个jquery脚本，它占用了＆＃34; job_code＆＃34;小时，并为每个人添加它们。但是，现在脚本结合了＆＃34; tommytest＆＃34;和＆＃34; testtest＆＃34;工作代码在一起。我试图让它单独计算每一个并将其打印在每个受尊重的表格下面。非常感谢任何想法。

$(document).ready(function () {

var timeString = $(this).next('td.hrs').text();
var components = timeString.split(':');
var seconds = components[1] ? parseInt(components[1], 10) : 0;
var hrs = parseInt(components[0], 10) + seconds / 60;
total += hrs;

var temp = [];
$('.job_code').each(function (index, element) {
    var text = $(this).text();
    if (text != 'Out') {
        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) {
        var timeString = $(this).siblings('td.hrs').text();
        var components = timeString.split(':');
        var seconds = components[1] ? parseInt(components[1], 10) : 0;
        var hrs = parseInt(components[0], 10) + seconds / 60;
        total += hrs;
        sum[index] = {
            'job_code': element,
                'total': total
        };
    });
});

console.log(sum);

$.each(sum, function (index, element) {
    $('#total').append('<p>Total for ' + element.job_code + ': ' + element.total + '</p>');
});

});

链接到jsFiddle：http://jsfiddle.net/Ha546/2/

如果可能的话，我希望这是动态的，因为不仅仅是这两个表。提前感谢您的帮助。

Answer 1

当您查询TD标记时，$(this).next('td.hrs')您对于您希望TD标记来自哪个表格不够具体。如果您更具体，例如，在表中添加id，

<table id="tommytest">...</table>
<table id="testtest">...</table>

然后您可以按表格查询：

var tdsFromTommytest = $(this).next('#tommytest td.hrs')
var tdsFromTesttest = $(this).next('#testtest td.hrs')

现在您拥有两个单独的TD列表，您可以按照自己的方式进行处理。我认为这是你问题的症结所在。但希望这有助于您了解如何在每个表格下更新单独的总标记。

Answer 2

您可以为tommyTest执行此操作，然后执行testtest：

将id添加到单个表

<table id="tommyTest">

在javascript中创建不同的计算值的方法：

$('#tommyTest').find('.job_code').each(function (index, element) {
        var text = $(this).text();
        if (text != 'Out') {
            temp.push(text);
        }
    });

JQuery用于包含HTML表数据的每个循环

2 个答案: