每个表的多个HTML表格总和列
[英]Multiple HTML tables sum column of each table
问题描述
I have a HTML table which is generated by PHP, Each table has a dynamic ID assigned to it 
我有一个由PHP生成的HTML表，每个表都有分配给它的动态ID
What i would like is a total of the time in the "Worked Time" column for each table. 我想要的是每个表的“工作时间”列中的总时间。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Visitor Sign In Admin</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<!--link href="css/sb-admin.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="css/plugins/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/ionicons.min.css"> <!-- needs to be made local -->
<head>
<body>
<div class="content-wrapper">
<section class="content-header">
<h1>
<div class="row">
<div >Cleaner Report (Today)</div>
<div ></section>
Todays report for cleaners
<section class="content">
<div class="row">
<div >
<div class="box box-primary">
<div class="box-body">
<?php
date_default_timezone_set('Europe/London');
include $con=mysqli_connect($hostname,$username,$password,"visitorsignin");
$sql = "SELECT staff_badgeid,first_name,last_name,signintime,signouttime FROM `signin_entries` WHERE iscleaner ='YES' AND signindate = curdate() ORDER BY staff_badgeid ASC";
$list_visitors_result=mysqli_query($con, $sql);
$count_visitors = mysqli_num_rows($list_visitors_result);
if ($count_visitors != 0) {
$current_badgeid = '';
while ($row = mysqli_fetch_array($list_visitors_result)) {
if ($current_badgeid == '') {
$current_badgeid = $row['staff_badgeid']; //define if empty, for the first table
echo "<table id='".$row['staff_badgeid']."' class='table table-bordered table-hover'><thead>
<tr>
<th>Name</th>
<th>Signin Time</th>
<th>Signout Time</th>
<th>Worked Time</th></section>
</tr>
</thead>
<tbody>";
}
if($row['staff_badgeid'] != $current_badgeid){
echo "<hr><br><tfoot><td class='totalCol'>Total:</td></tfoot></tr></table><table id='".$row['staff_badgeid']."' class='table table-bordered table-hover'><thead>
<tr>
<th>Name</th>
<th>Signin Time</th>
<th>Signout Time</th>
<th>Worked Time</th></section>
</tr>
</thead>
<tbody>";
$current_badgeid = $row['staff_badgeid'];
}
$signintime = $row['signintime'];
$signouttime = $row['signouttime'];
$firstname = $row['first_name'];
$lastname = $row['last_name'];
echo " <tr><td>$firstname $lastname</td><td>$signintime</td>";
if ($signouttime == "") {
echo "<td>Not Signed Out Yet</td>";
} else {
echo "<td>$signouttime</td>";
}
$timeFirst = strtotime(date("Y/m/d") . " " . $signintime);
$timeSecond = strtotime(date("Y/m/d") ." " . $signouttime);
//below checks if th second time is less than the first time than it must be from the day before so add 24 hours eg (signin time 23:30:00 signout time 07:30:30 would be 08:00:30 difference)
if ($timeSecond < $timeFirst) {
$timeSecond = $timeSecond + 86400;
}
if ($signouttime == "") {
echo "<td>Cleaner Has Not Signed Out Yet</td>";
} else {
$differenceInSeconds = $timeSecond - $timeFirst;
echo "<td class='rowDataSd'>".converttime($differenceInSeconds)."</td>";
}
echo "</tr>";
}
echo "<tfoot><td class='totalCol'>Total:</td></tfoot></tr></table>";
}
//below function converts the seconds difference into hh:mm:ss format to the nearest second
function converttime($seconds) {
$t = round($seconds);
return sprintf('%02d:%02d:%02d', ($t/3600),($t/60%60), $t%60);
}
?>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<?php include_once ('bottom.php'); ?>
What would be the best solution? 最好的解决方案是什么？ I'm currently stuck on the logic of referring to each table i did have this code which only applied to the first table due to the code referring to a single ID so only the first table worked correctly....is there anyway i could amend this to apply to the dynamic ID's now being applied? 我目前停留在引用每个表的逻辑上，我确实有此代码，该代码仅适用于第一个表，因为该代码引用的是单个ID，所以只有第一个表可以正常工作。修改此方法以将其应用于当前正在应用的动态ID？
<script type="text/javascript">
//below script taken from http://jsfiddle.net/unKDk/192/ looks at table id then column id called id rowDataSd
//<![CDATA[
$(window).load(function(){
var totals = [[0,0,0], [0,0,0], [0,0,0]];
$(document).ready(function () {
var $dataRows = $("#sum_table tr:not('.totalColumn, .titlerow')");
$dataRows.each(function () {
$(this).find('.rowDataSd').each(function (i) {
time = $(this).html().split(":")
totals[i][2] += parseInt(time[2]);
if(totals[i][2] > 60)
{
totals[i][2] %= 60;
totals[i][1] += parseInt(time[1]) + 1;
}
else
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]);
});
});
$("#sum_table td.totalCol").each(function (i) {
console.log(totals[i]);
$(this).html("" + totals[i][0] + ":" + totals[i][1] + ":" + totals[i][2]);
});
});
});
//]]></script>
If i change the script to refer to the table class as suggested i get a total of all tables "Worked Time" in the first table, I want a total of "Worked Time" per table 如果我按照建议更改脚本以引用表类，则我在第一个表中获得了所有表“工作时间”的总计，我希望每个表总计“工作时间”
This is incorrect as the first table show a total of both tables "Worked Time" columns, each table should have separate totals from their own tables. 这是不正确的，因为第一个表显示两个表的“工作时间”列的总计，每个表应具有与自己的表不同的总计。
1 个解决方案
解决方案1
1 已采纳 2019-07-09 15:02:11
Change the jquery selector from id to css class. 将jquery选择器从id更改为CSS类。
Instead of this: 代替这个：
var $dataRows = $("#sum_table tr:not('.totalColumn, .titlerow')");
That selects just one table, you should do: 那只选择一个表，您应该这样做：
var $dataRows = $(".css-class-of-all-tables tr:not('.totalColumn, .titlerow')");
That select all the tables with that css class 选择所有具有该CSS类的表
UPDATED 更新
Just calculate the total on the fly instead of useing a global variable. 只需即时计算总数即可，而无需使用全局变量。
$(".css-class-of-tables td.totalCol").each(function () {
var tbl = $(this).closest('table'); // find the table of the row
var totals = [0, 0, 0];
tbl.find('.rowDataSd').each(function (i) {
time = $(this).html().split(":")
totals[2] += parseInt(time[2]);
if (totals[2] > 60)
{
totals[2] %= 60;
totals[1] += parseInt(time[1]) + 1;
}
else
totals[1] += parseInt(time[1]);
if(totals[1] > 60)
{
totals[1] %= 60;
totals[0] += parseInt(time[0]) + 1;
}
else
totals[0] += parseInt(time[0]);
});
$(this).html("" + totals[0] + ":" + totals[1] + ":" + totals[2]);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.