Расчет времени по столбцам и показ общего времени

Question

Я хочу создать несколько таблиц, которые будут подсчитывать общее время в каждой отдельной таблице.У меня это работает для 1 таблицы, но когда я копирую и вставляю для второй таблицы, тогда она подсчитывает сумму в первой таблице ...

Так что кто-нибудь может мне помочь, чтобы я мог сделать несколько таблиц на одной страницеи что общее количество разделено в каждой таблице?

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

  var $dataRows = $(".time-holder tr:not('.total-wrapper')");

  $dataRows.each(function() {
    $(this).find('.time').each(function(i) {
      time = $(this).html().split(":")
      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]);
    });
  });
  $(".time-holder td.total-time").each(function(i) {
    $(this).html("" + totals[i][0] + ":" + totals[i][1]);
  });

});

body {
  font: 12px/1.3em Arial;
}

.time-holder td {
  padding: 5px 0;
}

.total-wrapper td {
  text-align: right;
  font-weight: bold;
  padding-right: 5px;
}

.total-wrapper td.total-time {
  text-align: left;
  padding-right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="time-holder" width="100%">
  <tr>
    <td>Name</td>
    <td>Location</td>
    <td class="time">40:05</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>Location</td>
    <td class="time">04:17</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>Location</td>
    <td class="time">04:06</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>Location</td>
    <td class="time">07:04</td>
  </tr>
  <tr class="total-wrapper">
    <td colspan="2">Total time:</td>
    <td class="total-time"></td>
  </tr>
</table>

Answer 1

Вы можете сделать это так:

$(document).ready(function() {

  $(".time-holder").each(function() {
    var totals = [
      [0, 0, 0]
    ];
    var $dataRows = $(this).find("tr:not('.total-wrapper')");

    $dataRows.each(function() {
      $(this).find('.time').each(function(i) {
        time = $(this).html().split(":")
        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]);
      });
    });
    $(this).find("td.total-time").each(function(i) {
      $(this).html("" + totals[i][0] + ":" + totals[i][1]);
    });


  });
});

Я добавил, чтобы он зацикливался на каждом .time-holder, а затем использовал $(this).find("tr:not('.total-wrapper')") и $(this).find("td.total-time")

Рабочая демоверсия

$(document).ready(function() {

  $(".time-holder").each(function() {
    var totals = [
      [0, 0, 0]
    ];
    var $dataRows = $(this).find("tr:not('.total-wrapper')");

    $dataRows.each(function() {
      $(this).find('.time').each(function(i) {
        time = $(this).html().split(":")
        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]);
      });
    });
    $(this).find("td.total-time").each(function(i) {
      $(this).html("" + (totals[i][0].toString().length == 1 ? "0" + totals[i][0] : totals[i][0]) + ":" + (totals[i][1].toString().length == 1 ? "0" + totals[i][1] : totals[i][1]));
    });


  });
});

body {
  font: 12px/1.3em Arial;
}

.time-holder td {
  padding: 5px 0;
}

.total-wrapper td {
  text-align: right;
  font-weight: bold;
  padding-right: 5px;
}

.total-wrapper td.total-time {
  text-align: left;
  padding-right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>tabel1</h2>
<table class="time-holder" width="100%">
  <tr>
    <td>Name</td>
    <td>Location</td>
    <td class="time">40:05</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>Location</td>
    <td class="time">04:17</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>Location</td>
    <td class="time">04:06</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>Location</td>
    <td class="time">07:04</td>
  </tr>
  <tr class="total-wrapper">
    <td colspan="2">Total time:</td>
    <td class="total-time"></td>
  </tr>
</table>

<h2>tabel2</h2>
<table class="time-holder" width="100%">
  <tr>
    <td>Name</td>
    <td>Location</td>
    <td class="time">08:00</td>
  </tr>
  <tr class="total-wrapper">
    <td colspan="2">Total time:</td>
    <td class="total-time"></td>
  </tr>
</table>