How to sum up all duration (hh:mm) from each TR with jquery?

Question

I have 3 inputs. One input contain start time and another contain end time, the third input contain the duration between start time and end time in HH:mm format.

I want to sum up all the duration to give me the output in HH:mm format and show in the Total duration input textbox. I sum up all my duration but it does not give me anything. What's the error here? Can anyone help?

For instance:

       <table id='timelist'> 
        <tr> 
          <td><input type="text" name="starttime" id="starttime" value="06:00"></td>
          <td><input type="text" name="endtime" id="endtime" value="07:55"></td>
          <td><input type="text" name="duration" id="duration" value="01:55"></td>
        </tr>

        <tr> 
          <td><input type="text" name="starttime" id="starttime" value="07:55"></td>
          <td><input type="text" name="endtime" id="endtime" value="23:45"></td>
          <td><input type="text" name="duration" id="duration" value="15:50"></td>
        </tr>

        <tr> 
          <td><input type="text" name="starttime" id="starttime" value="23:45"></td>
          <td><input type="text" name="endtime" id="endtime" value="04:10"></td>
          <td><input type="text" name="duration" id="duration" value="04:25"></td>
        </tr>
      </table>

<!----total hour output to show here---->
Total Duration: <input type="text" name="totalduration" id="totalduration">

This is my JS:

$('#timelist tr').each(function (i, row)
        {
            var fields = $(this).find(':input');
            var startime = fields.eq(1).val();
            var endtime = fields.eq(2).val();

            var str0 = "";
            var str1 = "";

            if(startime >= "00:00" && startime < "06:00"){
                        str0 = "01/02/1970 " + startime;
                    }else{
                        str0 = "01/01/1970 " + startime;                            
                    }

            if(endtime >= "00:00" && endtime <= "06:00"){
                        str1 = "01/02/1970 " + endtime;
                    }else{
                        str1 = "01/01/1970 " + endtime;
                    }

            var diff = (Date.parse(str1)-Date.parse(str0))/1000/60;
                    var hours = String(100+Math.floor(diff/60)).substr(1);
            var mins = String(100+diff%60).substr(1);
            var duration = fields.eq(3).val(hours+':'+mins);

                duration += duration;
}); 

    $('#totalduration').val(duration);

Refer this https://stackoverflow.com/questions/25764553/add-2-times-together-javascript — Casper, Sep 25 '19 at 03:54

score 1 · Accepted Answer · answered Sep 25 '19 at 03:57

One thing that needs pointing out ... having multiple elements with the same ID is invalid HTML

Fortunately in this case it's not a big deal, but it's something you should change

Here's a non-jquery answer

const result = [...document.querySelectorAll('#timelist #duration')].reduce((a, {value}) => {
  const [hh, mm] = value.split(':').map(Number);
  return a + hh * 60 + mm;
}, 0);

const mm = result%60, hh = (result-mm)/60;
document.getElementById('totalduration').value = `${hh.toString().padStart(2, 0)}:${mm.toString().padStart(2, 0)}`;

<table id='timelist'> 
        <tr> 
          <td><input type="text" name="starttime" id="starttime" value="06:00"></td>
          <td><input type="text" name="endtime" id="endtime" value="07:55"></td>
          <td><input type="text" name="duration" id="duration" value="01:55"></td>
        </tr>

        <tr> 
          <td><input type="text" name="starttime" id="starttime" value="07:55"></td>
          <td><input type="text" name="endtime" id="endtime" value="23:45"></td>
          <td><input type="text" name="duration" id="duration" value="15:50"></td>
        </tr>

        <tr> 
          <td><input type="text" name="starttime" id="starttime" value="23:45"></td>
          <td><input type="text" name="endtime" id="endtime" value="04:10"></td>
          <td><input type="text" name="duration" id="duration" value="04:25"></td>
        </tr>
      </table>
      Total Duration: <input type="text" name="totalduration" id="totalduration">

And here's how you probably should do it, to fix the multiple identical ID problem

const result = [...document.querySelectorAll('#timelist .duration')].reduce((a, {value}) => {
  const [hh, mm] = value.split(':').map(Number);
  return a + hh * 60 + mm;
}, 0);

const mm = result%60, hh = (result-mm)/60;
document.getElementById('totalduration').value = `${hh.toString().padStart(2, 0)}:${mm.toString().padStart(2, 0)}`;

<table id='timelist'> 
        <tr> 
          <td><input type="text" name="starttime" class="starttime" value="06:00"></td>
          <td><input type="text" name="endtime" class="endtime" value="07:55"></td>
          <td><input type="text" name="duration" class="duration" value="01:55"></td>
        </tr>

        <tr> 
          <td><input type="text" name="starttime" class="starttime" value="07:55"></td>
          <td><input type="text" name="endtime" class="endtime" value="23:45"></td>
          <td><input type="text" name="duration" class="duration" value="15:50"></td>
        </tr>

        <tr> 
          <td><input type="text" name="starttime" class="starttime" value="23:45"></td>
          <td><input type="text" name="endtime" class="endtime" value="04:10"></td>
          <td><input type="text" name="duration" class="duration" value="04:25"></td>
        </tr>
      </table>
      Total Duration: <input type="text" name="totalduration" id="totalduration">

How to sum up all duration (hh:mm) from each TR with jquery?

1 Answers1