学做网站培训课程介绍

当前位置:

JS实现网页表格自动计算每月总数值

对于一些数据,我们经常使用TABLE表格来汇总,这样可以看起来更清楚。通常我们可以在表格的最底部显示一下整个表格的值总和。如下图:

对于这样的有日期的数据,怎么让它自动到月底进行每月的数据汇总呢?如下图:

这时,我们可以使用JS来实现网页表格自动计算每月总数值。

先是放上HTML表格代码


<div class="mainall">
<table width="100%" border="1">
<tr>
<td>编号</td>
<td>购买日期</td>
<td>收款金额</td>
</tr>
<tr class="202204" data-jiage = "270">
<td>1</td>
<td>2022-04-23 15:52:00</td>
<td>270元</td>
</tr>
<tr class="202204" data-jiage = "280">
<td>2</td>
<td>2022-04-24 12:13:00</td>
<td>280元</td>
</tr>
<tr class="202204" data-jiage = "280">
<td>3</td>
<td>2022-04-26 12:13:00</td>
<td>280元</td>
</tr>

<tr class="202205" data-jiage = "1270">
<td>4</td>
<td>2022-05-23 15:52:00</td>
<td>1270元</td>
</tr>
<tr class="202205" data-jiage = "1280">
<td>5</td>
<td>2022-05-24 12:13:00</td>
<td>1280元</td>
</tr>
<tr class="202205" data-jiage = "1280">
<td>6</td>
<td>2022-05-26 12:13:00</td>
<td>1280元</td>
</tr>
<tr class="202205" data-jiage = "1280">
<td>7</td>
<td>2022-05-29 10:13:00</td>
<td>1280元</td>
</tr>
<tr class="202206" data-jiage = "820">
<td>8</td>
<td>2022-06-13 15:55:00</td>
<td>820元</td>
</tr>
<tr class="202206" data-jiage = "690">
<td>9</td>
<td>2022-06-14 17:13:00</td>
<td>690元</td>
</tr>
<tr class="202206" data-jiage = "450">
<td>10</td>
<td>2022-06-16 19:23:00</td>
<td>450元</td>
</tr>

</table>
</div>

再放上JS代码:

下载自动按月计算数值总金额JS插件文件autoss.js;然后使用以下的代码引入JS;在表格代码下方来放上以下的JS代码


<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="autoss.js"></script>

最后是CSS代码。为了区分汇总值与其它值,可以给汇总数据加个红色。


<style>
*{margin:0;padding:0;}
body{background:#f5f5f5;}
.mainall{width:480px;padding:20px;background:#fff;margin:0 auto;}
td{padding:5px;}
input,textarea{padding:10px;}
textarea{border:none;width:90%;}
span{margin-left:5px;color:#F63;}
table{border:1px solid #333; border-collapse:collapse;}
td{border:1px solid #333;}
</style>

这样一个普通的网页数据表格,就会自动计算每月的总数据了。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程