如何使用html或php或javascript或css将表TD计算为总数?示例
<table><tr><td> 1000 </td></tr><tr><td> 2000 </td></tr><tr><td> 3000 </td></tr><tr><td> TOTAL 6000 </td></tr></table>
<table>
<tr><td> 1000 </td></tr>
<tr><td> 2000 </td></tr>
<tr><td> 3000 </td></tr>
<tr><td> TOTAL 6000 </td></tr>
</table>
6ovsh4lw1#
所以先把表存入内存,然后输出总数。
while(... fetch from db ... ) { $html = '... table row ..'; $total += $row['cost'];}echo 'Total: ' . $total;echo $html; // output table contents
while(... fetch from db ... ) {
$html = '... table row ..';
$total += $row['cost'];
}
echo 'Total: ' . $total;
echo $html; // output table contents
wgeznvg72#
只是为了好玩:您 * 可以 * 保持输出原样(至少是顺序,即首先输出项,然后输出总计/总和),然后通过将box-ordinal-group设置为相反顺序来更改元素在浏览器呈现中的位置/顺序。
<!DOCTYPE html><html> <head> <title>...</title> <style> #container { display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; } #total { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; box-ordinal-group: 1; } #items { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; box-ordinal-group: 2; } </style> </head> <body> <div id="container"> <div id="items"><!-- though it's before #total in the document --> <ul><li>a</li><li>b</li><li>c</li><li>d</li><li>e</li></ul> </div> <div id="total"><!-- #total will be rendered above #items ...if flexible boxing is supported --> 1234 </div> </div> </body></html>
<!DOCTYPE html>
<html>
<head>
<title>...</title>
<style>
#container {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
#total {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
#items {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
</style>
</head>
<body>
<div id="container">
<div id="items"><!-- though it's before #total in the document -->
<ul><li>a</li><li>b</li><li>c</li><li>d</li><li>e</li></ul>
</div>
<div id="total"><!-- #total will be rendered above #items ...if flexible boxing is supported -->
1234
</body>
</html>
gxwragnw3#
我认为@Marc B的答案是你问题标题的更好答案。如果您希望MySQL数据库的更新实时推送到您的Web页面,则是另一个问题-请查看Rachet Web Sockets for PHP。如果你想要一个javascript的解决方案,只是计算你的总数...HTML:将相同的类名添加到每个非总计表单元格中。
<tr><td class="amt"> 3000 </td></tr>
在"total"单元格中添加一个带有id的范围。
<tr><td>TOTAL <span id="total">...</span></td></tr>
此时将显示Javascript:获取所有"amt"细胞的HTMLCollection。
const amounts = document.querySelectorAll('.amt');
获取对"total"单元格的引用
const total_cell = document.querySelector('#total');
声明一个变量来保存计算。
Let total = 0;
循环遍历金额,获取每个单元格的内容作为Number,并将该数字添加到"total"的值中。
for (const amt of amounts) { const number = Number(amt.innerText); total += number;}
for (const amt of amounts) {
const number = Number(amt.innerText);
total += number;
然后更新"总计"单元格
total_cell.innerText = total;
整个事情...
const amounts = document.querySelectorAll('.amt');const total_cell = document.querySelector('#total');let total = 0;for (const amt of amounts) { const number = Number(amt.innerText); total += number;}total_cell.innerText = total;
let total = 0;
<table> <tr><td class="amt"> 1000 </td></tr> <tr><td class="amt"> 2000 </td></tr> <tr><td class="amt"> 3000 </td></tr> <tr><td>TOTAL <span id="total">...</span></td></tr></table>
<tr><td class="amt"> 1000 </td></tr>
<tr><td class="amt"> 2000 </td></tr>
3条答案
按热度按时间6ovsh4lw1#
所以先把表存入内存,然后输出总数。
wgeznvg72#
只是为了好玩:您 * 可以 * 保持输出原样(至少是顺序,即首先输出项,然后输出总计/总和),然后通过将box-ordinal-group设置为相反顺序来更改元素在浏览器呈现中的位置/顺序。
gxwragnw3#
我认为@Marc B的答案是你问题标题的更好答案。
如果您希望MySQL数据库的更新实时推送到您的Web页面,则是另一个问题-请查看Rachet Web Sockets for PHP。
如果你想要一个javascript的解决方案,只是计算你的总数...
HTML:将相同的类名添加到每个非总计表单元格中。
在"total"单元格中添加一个带有id的范围。
此时将显示Javascript:
获取所有"amt"细胞的HTMLCollection。
获取对"total"单元格的引用
声明一个变量来保存计算。
循环遍历金额,获取每个单元格的内容作为Number,并将该数字添加到"total"的值中。
然后更新"总计"单元格
整个事情...