jquery - 从列计算时间并显示总时间
问题描述
我想制作多个表格来计算每个表格中的总时间。我让它在一张桌子上工作,但是当我复制并过去第二张桌子时,它会在第一张桌子上计算总数......
那么有人可以帮助我,我可以在一页上制作多个表格,并且每个表格中的总数都是分开的吗?
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>
解决方案
你可以这样做:
$(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>
推荐阅读
- c# - 如何将带有两个 from 子句的 Linq-to-objects 查询转换为方法语法
- python - 如何在熊猫中将对象类型列转换为日期时间
- woocommerce - WooCommerce 基于数量的额外费用
- android - Android 应用程序在按下后退按钮时退出,而不是导航到上一个屏幕 - Flutter
- javascript - 为什么通过 mousemove 旋转 div 不起作用 javascript?
- python - Apache Beam:- Pardo 的意外输出
- airflow - Apache Airflow:基于执行时间的动态时间间隔
- java - Spring Boot - Shell 命令被日志记录中断
- c# - 如何使用 id_token 从 Azure Function 应用程序获取 Azure access_token?
- doctrine-orm - Repository (Doctrine\ORM\EntityRepository) 不接受 Doctrine\Persistence\ObjectRepository