easyUI的table表格怎么实现将某一列数据之和放入新追加的一行中

本文介绍了一种在网页表格中实现数据自动求和的方法,并展示了如何将计算结果添加到表格的最后一行作为总计。该方法适用于包含数值型数据的表格,并使用JavaScript配合easyui插件实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先是页面中求和的代码 ,放在function onLoadSuccess() 中

<script type="text/javascript">
                        function onLoadSuccess(data) {
                            var rows = $('#dg').datagrid('getRows');
//获取当前的数据行,dg为table的id
                            var onetotal=0,twotatal=0;//初始化存放和的变量

  //只计算了one ,two 两列数据的和

          for(var i=0;i<rows.length;i++){

   onetotal += rows[i]['one'];//one,two为列名
                twototal += rows[i]['two'];

       }         

                 //新增一行显示统计信息
                 $('#dg').datagrid('appendRow', { total: '<b>总计:</b>', one: oneptotal, two: twototal });
        }           

  </script>

这是我们操作的table,当然里面的数据要自己给,数据类型为实数,不能是字符型的,否则会计算出错

 <table id="dg" toolbar="#toolbar" class="easyui-datagrid" pagination="true"   data-options="onLoadSuccess: onLoadSuccess ">
                                                          
                            <thead>
                                <tr>
                                    <th data-options="field:'productid',">招生结业</th>                              
                                    <th data-options="field:'year',width:60">年份</th>
                                    <th data-options="field:'total',width:60">合计</th>
                                    <th data-options="field:'one',width:60">一月</th>
                                    <th data-options="field:'two',width:60">二月</th>
                                    <th data-options="field:'three',width:60">三月</th>
                                    <th data-options="field:'four',width:60">四月</th>
                                    <th data-options="field:'five',width:60">五月</th>
                                    <th data-options="field:'six',width:60">六月</th>
                                    <th data-options="field:'seven',width:60">七月</th>
                                    <th data-options="field:'eight',width:60">八月</th>
                                    <th data-options="field:'nine',width:60">九月</th>
                                    <th data-options="field:'ten',width:60">十月</th>
                                    <th data-options="field:'eleven',width:60">十一月</th>
                                    <th data-options="field:'twlve',width:60">十二月</th>
                                    <th data-options="field:'returns',width:60">退费</th>
                                </tr>
                            </thead>
       </table>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值