Question

我有一个表，其中有多个表供多个用户使用。这些用户可以增加或减少加班，所以我试图让它尽可能地动态。我将附上两个样本表，以便您了解。

<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脚本，它从员工的时间中获取不同工作代码的总数并总计。脚本本身对于每个作业代码都是动态的，但我试图使其成为动态的，以便它通过第一个表或用户运行，输出总数，然后对下一个表执行相同的操作，依此类推。

$(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>');
});

});

我将非常感激任何建议，因为我刚开始使用javascript并且很快就达到了我的能力。以下是示例JSfiddle

的链接

提前致谢

Answer 1

这是你正在寻找的东西：

  function tfoot(total){
  var tfoot = ['<tfoot>',
         '<tr>',
         '<td colspan="3">Total</td>',
         '<td>'+total+'</td>',
         '</tr>',
         '</tfoot>'];
 return tfoot.join('/n');
 }

$('table').each(function(){
 var sum = 0;
 $(this).find('td.hrs').each(function(){
  sum+= +$(this).text().split(':')[0]
 });
 $(this).append(tfoot(sum));
});

的 DEMO

EDITTED：

function toSeconds(s){ var p = s.split(':'); return parseInt(p[0], 10) * 3600 + parseInt(p[1], 10) * 60; } function fill(s, digits) { s = s.toString(); while (s.length < digits) s = '0' + s; return s; } function addRows(obj){ var rows='<tr><td colspan="4">Total:</td></tr>'; for(var key in obj){ var formatted = fill(Math.floor(obj[key] / 3600), 2) + ':' + fill(Math.floor(obj[key] / 60) % 60, 2); rows+='<tr><td colspan="3">'+key+'</td><td>'+formatted+'</td></tr>'; } return rows; } $('table').each(function(){ var tr = {}; $(this).find('tr').each(function(){ var key = $(this).find('td.job_code').text(); var val1 = toSeconds($(this).find('td.hrs').text()); //var val = +$(this).find('td.hrs').text().split(':')[0]; if(tr[key]){ tr[key]+=val1; }else{ tr[key]=val1; } }); $(this).append(function(){ var tfoot = $('<tfoot/>', { html: addRows(tr) }); return tfoot; }); });

<强> EDITED DEMO

JQuery动态for循环问题

1 个答案:

的 DEMO