Calculate the sum of the time for column

Question

I have this table:

<table id="total" border="1" width="100%">
    <tbody>
        <tr>
            <td>Total duration time</td>
            <td class="total_duration_time"></td>
        </tr>
    </tbody>
</table>
<table id="data" border="1" width="100%">
    <tbody>
        <tr>
            <td>Anna</td>
            <td>318</td><td class="duration_time">00:00:50</td>
            <td>62700</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>318</td>
            <td class="duration_time">00:00:27</td>
            <td>62703</td>
        </tr>
        <tr>
            <td>Mike</td>
            <td>318</td>
            <td class="duration_time">00:00:36</td>
            <td>88455233284</td>
        </tr>
    </tbody>
</table>

I need to calculate the sum of the column with class duration_time and print result in to column with class total_duration_time.

How to do this on JavaScript or jQuery?

I tried to use the code from this example http://jsfiddle.net/unKDk/13/, but it does not calculate the amount of time if instead of numbers substitute a value of type 00:00:00.

You're going to have to manually parse the times. You could use a regex, or split by `:`, and do the math yourself — Ian, Jun 13 '13 at 15:20
Here's what I got: http://jsfiddle.net/5gXSm/ . It doesn't figure out carrying over - for example, if the number of seconds goes over 60, it shouldn't become 61 - it should increase the number of minutes and reset to 0. I'll leave that up to you — Ian, Jun 13 '13 at 15:44

stefanz · Accepted Answer · 2021-12-06T13:20:00.413

5

The easiest way is to work with seconds. I mean, you can convert each duration to seconds, make the total and then show where you need using another function that converts the seconds to hh-mm-ss format.

You can check how it looks and it works here

Note : the function toHHMMSS() is taken form here

edited Dec 06 '21 at 13:20

answered Jun 13 '13 at 15:48

stefanz

1,316
13
23

Working with second is usually the best option for doing time calculation, get use to it – Jaay Jun 13 '13 at 15:51
Yes, this is what i said. Is the best way to keep the value in a database or playing with, when we're talking about time – stefanz Jun 13 '13 at 15:55
Thank you! You are very much helped me. – n1k1c4 Jun 13 '13 at 17:05
Simple and perfect ! ;) – Diogo Cid Aug 11 '15 at 11:01
Whilst this may theoretically answer the question, [it would be preferable](//meta.stackexchange.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – mplungjan Oct 11 '21 at 09:03

score 2 · Answer 2 · answered Jun 13 '13 at 15:50

Here's a full example with carry (assuming the format is HOURS:MINUTES:SECONDS), maybe not the best solution for computation:

HTML

<table id="sum_table" width="300" border="1">
<tr class="titlerow">
    <td>Apple</td>
    <td>Orange</td>
    <td>Watermelon</td>
</tr>
<tr>
    <td class="rowDataSd">00:55:23</td>
    <td class="rowDataSd">00:55:23</td>
    <td class="rowDataSd">00:55:23</td>
</tr>
<tr>
    <td class="rowDataSd">00:55:23</td>
    <td class="rowDataSd">00:55:23</td>
    <td class="rowDataSd">00:55:23</td>
</tr>
<tr>
    <td class="rowDataSd">00:55:23</td>
    <td class="rowDataSd">00:55:23</td>
    <td class="rowDataSd">00:55:22</td>
</tr>
<tr class="totalColumn">
    <td class="totalCol">Total:</td>
    <td class="totalCol">Total:</td>
    <td class="totalCol">Total:</td>
</tr>
</table>

JS

var totals = [[0,0,0], [0,0,0], [0,0,0]];
$(document).ready(function () {

var $dataRows = $("#sum_table tr:not('.totalColumn, .titlerow')");

$dataRows.each(function () {
    $(this).find('.rowDataSd').each(function (i) {
        time = $(this).html().split(":")
        totals[i][2] += parseInt(time[2]);
        if(totals[i][2] > 60)
        {
            totals[i][2] %= 60;
            totals[i][1] += parseInt(time[1]) + 1;          
        }
        else
            totals[i][1] += parseInt(time[1]);

        if(totals[i][1] > 60)
        {
            totals[i][1] %= 60;
            totals[i][0] += parseInt(time[0]) + 1;          
        }
        else
            totals[i][0] += parseInt(time[0]);
    });
});
$("#sum_table td.totalCol").each(function (i) {
    console.log(totals[i]);
    $(this).html("total:" + totals[i][0] + ":" + totals[i][1] + ":" + totals[i][2]);
});

});

http://jsfiddle.net/unKDk/192/

score 2 · Answer 3 · answered Dec 05 '17 at 07:04

2

You can calculate total time by using 24hr format time inputs

var a = "22:00"
var b = "01:00"

Fiddle Demo :

Time Calculation Example, https://github.com/Zalasanjay

answered Dec 05 '17 at 07:04

Sanjaysinh Zala

134
2
12

Xotic750 · Answer 4 · 2013-06-13T16:03:58.617

You will need to do something like this, I haven't tested it extensively, so there may be problems, but you should get the idea.

Javascript

var totalDurationTime = document.getElementsByClassName("total_duration_time")[0],
    durationTimes = document.getElementsByClassName("duration_time"),
    total = {
        hours: 0,
        minutes: 0,
        seconds: 0
    };

function zeroPad (num) {
    var str = num.toString();

    if (str.length < 2) {
        str = "0" + str;
    }

    return str;
}

Array.prototype.forEach.call(durationTimes, function (time) {
    var parts = time.textContent.split(":"),
        temp;

    temp = (+parts[2] + total.seconds);
    total.seconds = temp % 60;    
    temp = (+parts[1] + total.minutes) + (temp - total.seconds) / 60;
    total.minutes = temp % 60;    
    total.hours = (+parts[0] + total.hours) + (temp - total.minutes) / 60;
});

totalDurationTime.textContent = zeroPad(total.hours) + ":" + zeroPad(total.minutes) + ":" + zeroPad(total.seconds);

On jsfiddle

Calculate the sum of the time for column

4 Answers4

Linked