Sum of values in html table row

Question

I have this HTML table

Now I want to display sum of hours to the last column.

I tried like this, its not worked for me.

HTML

<table class='Table'>
    <tr><td><span class='hours'>8:16</span></td><td><span class='hours'>8:27</span></td><td><span class='hours'>7:30</span></td><td>Print Sum of duration of this Row</td></tr>
    <tr><td><span class='hours'>6:53</span></td><td><span class='hours'>8:02</span></td><td><span class='hours'>8:17</span></td><td>Print Sum of duration of this Row</td></tr>
    <tr><td><span class='hours'>8:09</span></td><td><span class='hours'>8:28</span></td><td><span class='hours'>8:42</span></td><td>Print Sum of duration of this Row</td></tr>
</table>

Jquery

$(".Table tr td .hours").each(function(){
    vals1=$(this).html()
    console.log(vals1)
    $(this).parent().parent().parent().find("td:last").html(vals1)
})

From the above code I am unable to determine end of row(TR). Would be helpful if any suggestion to find sum of duration.

Answer 1

You can iterate over each tr and find the sum of the fields like

$(".Table tr:has(.hours)").each(function() {
  var sum = 0;
  $(this).find('td .hours').each(function() {
    var parts = $(this).text().split(':')
    sum += (parts[0] * 60 || 0) + (+parts[1] || 0);
  });
  var mins = Math.floor(sum / 60);
  var sec = sum % 60;
  $(this).find("td:last").html(mins + ':' + ('0' + sec).slice(-2))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='Table'>
  <tr>
    <td><span class='hours'>8:16</span>
    </td>
    <td><span class='hours'>8:27</span>
    </td>
    <td><span class='hours'>7:30</span>
    </td>
    <td>Print Sum of duration of this Row</td>
  </tr>
  <tr>
    <td><span class='hours'>6:53</span>
    </td>
    <td><span class='hours'>8:02</span>
    </td>
    <td><span class='hours'>8:17</span>
    </td>
    <td>Print Sum of duration of this Row</td>
  </tr>
  <tr>
    <td><span class='hours'>8:09</span>
    </td>
    <td><span class='hours'>8:28</span>
    </td>
    <td><span class='hours'>8:42</span>
    </td>
    <td>Print Sum of duration of this Row</td>
  </tr>
</table>