JQuery动态表总计

时间:2013-04-19 09:23:43

标签: javascript jquery dynamic html-table

我有这张桌子:

该表包含每月的数据,但仅显示所选日期。

所以,问题是:如何每月总计实际工时和额外工时(可见数据)?

这就是我构建表格的方式:

var total = 0 ;
    var actualTotal = 0 ;
    var totalEH = 0;

    var table=document.getElementById("fbody");
    for (var i=0;i<user.length;i++)
    {

        var row=table.insertRow(-1);
        var cellDate                =       row.insertCell(-1);
        var cell2                   =       row.insertCell(-1);
        var cell3                   =       row.insertCell(-1);
        var cell4                   =       row.insertCell(-1);
        var cell5                   =       row.insertCell(-1);
        var cell7                   =       row.insertCell(-1);
        var cell8                   =       row.insertCell(-1);

        var startAM                 =       user[i].reg_start_worktime_am;
        var finishAM                =       user[i].reg_finish_worktime_am;
        var startPM                 =       user[i].reg_start_worktime_pm;
        var finishPM                =       user[i].reg_finish_worktime_pm;


        cellDate.innerHTML          =       user[i].reg_date;
        cell2.innerHTML             =       user[i].reg_start_worktime_am;
        cell3.innerHTML             =       user[i].reg_finish_worktime_am;
        cell4.innerHTML             =       user[i].reg_start_worktime_pm;
        cell5.innerHTML             =       user[i].reg_finish_worktime_pm;
        cell7.innerHTML             =       calcTimeDifference(startAM.substring(0,2), startAM.substring(3,5), finishAM.substring(0,2), finishAM.substring(3,5), startPM.substring(0,2), startPM.substring(3,5), finishPM.substring(0,2), finishPM.substring(3,5));
        cell8.innerHTML             =       (calcTimeDifference(startAM.substring(0,2), startAM.substring(3,5), finishAM.substring(0,2), finishAM.substring(3,5), startPM.substring(0,2), startPM.substring(3,5), finishPM.substring(0,2), finishPM.substring(3,5))-user[i].worktime_fullhours).toFixed(2);

        if (cell8.innerHTML != "NaN")
        {

            totalEH                 +=      parseFloat((calcTimeDifference(startAM.substring(0,2), startAM.substring(3,5), finishAM.substring(0,2), finishAM.substring(3,5), startPM.substring(0,2), startPM.substring(3,5), finishPM.substring(0,2), finishPM.substring(3,5))-user[i].worktime_fullhours).toFixed(2));
            total                   =       (document.getElementById('box-table-a').rows.length-1)*user[0].worktime_fullhours;
            actualTotal             +=      parseFloat(calcTimeDifference(startAM.substring(0,2), startAM.substring(3,5), finishAM.substring(0,2), finishAM.substring(3,5), startPM.substring(0,2), startPM.substring(3,5), finishPM.substring(0,2), finishPM.substring(3,5)));
        }
    }

由于

修改

修正:

var totalActuals = 0,
    totalExtras = 0;
var totalHours = 0;
var trs = $("#fbody tr").each(function(e) {
if($(this).css('display')!='none')
    if( $("td:eq(6)", this).text() != 'NaN' ) {
        // alert("Horro! "+$("td:eq(6)", this).text() );
        totalActuals += parseFloat( $("td:eq(5)", this).text() );
        totalExtras += parseFloat($("td:eq(6)", this).text());
        totalHours++;
    }
});
totalHours = totalHours*8;

1 个答案:

答案 0 :(得分:0)

如果我理解正确,你的表会有一些可见的行,有些行会被隐藏。并且,您想要计算可见行的总计。

您可以通过仅循环显示可见行并访问计算总计所需的列来执行此操作。

var totalActuals = 0;
var totalExtras = 0;
$.each($('table tr:visible',function() {
    totalActuals += $(this).find(".actualHours").val();
    totalExtras += $(this).find(".totalExtras").val();
};)

但是这也会返回标题行。所以我认为你应该为表的行分配一个类,并使用jquery选择器中的类 - $('table .tableRow:visible')

修改

在这里,我假设您已经将“actualHours”,“totalExtras”类赋予了div,其中实际小时数和总额外小时数显示在表格的每一行中。如果您还没有这样做,可以使用 -

totalActuals += $(this).find("td").eq(5).text();
totalActuals += $(this).find("td").eq(6).text();

这将选择该行的第5和第6列。