从库计算时间并显示总时间

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>