jquery实现表格字段统计功能

最新推荐文章于 2021-04-26 15:01:25 发布

君君要上天

最新推荐文章于 2021-04-26 15:01:25 发布

阅读量2.7k

点赞数 1

分类专栏：开发小笔记文章标签： jquery

本文链接：https://blog.csdn.net/u010837612/article/details/53022497

版权

开发小笔记专栏收录该内容

67 篇文章 3 订阅

订阅专栏

在使用html的table时，经常会需要统计某个字段，下面分享一个本人封装好的方法，快速实现统计功能

主要使用方法是：在要统计的字段的th中加上class="get-sum"即可

注意：table中有无thead和tbody，autoSum略有不同。下面给出了两种方法，分别支持有thead和tbody或没有。

以下两种方法暂时只支持单表格，不支持一个页面中有多个表格都要进行统计

效果如下：

这里写图片描述

有thead和tbody

<html>
<head>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>字段1</th>
                <th>字段2</th>
                <th class='get-sum'>字段3</th>
                <th>字段4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>3</td>
                <td>4</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>3</td>
                <td>2</td>
                <td>4</td>
            </tr>
            <tr>
                <td>4</td>
                <td>3</td>
                <td>2</td>
                <td>2</td>
            </tr>
        </tbody>
    </table>
</body>
<script type="text/javascript" src='//cdn.bootcss.com/jquery/3.1.1/jquery.min.js'></script>
<script>

        if($('.get-sum').length>0){
            autoSum();
        }

        function autoSum(){

            var total_objs = new Object();
            $('.get-sum').each(function(){
                var index = $('tr th').index(this);
                var total = 0;
                $(this).parent('tr').parent('thead').next('tbody').children('tr').each(function(){
                    var text = $(this).find('td').eq(index).text();
                    total += Number(text);
                });
                total_objs[index] = total;
            });
            var td_num = $('.get-sum').parent('tr').find('th').length;
            var tds = '<tr style="background-color:#4bbd00;color:white;">'
            for(var i=0;i<td_num;i++){
                var total = '';
                if(total_objs[i]!=undefined){
                    total = Number(total_objs[i]);
                }
                tds += '<td>' + total + '</td>';
            }
            tds += '</tr>';
            $('.get-sum').closest('table').append(tds);

        }
</script>
</html>

无tbody和thead的autoSum方法

<html>

<head>

</head>

<body>

    <table>
            <tr>
                <th>字段1</th>
                <th>字段2</th>
                <th class='get-sum'>字段3</th>
                <th>字段4</th>
            </tr>
            <tr>
                <td>1</td>
                <td>3</td>
                <td>4</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>3</td>
                <td>2</td>
                <td>4</td>
            </tr>
            <tr>
                <td>4</td>
                <td>3</td>
                <td>2</td>
                <td>2</td>
            </tr>

    </table>

</body>
<script type="text/javascript" src='//cdn.bootcss.com/jquery/3.1.1/jquery.min.js'></script>
<script>

        if($('.get-sum').length>0){
            autoSum();
        }

        function autoSum(){

            var total_objs = new Object();
            $('.get-sum').each(function(){
                var index = $('tr th').index(this);
                var total = 0;
                $(this).parent('tr').nextAll('tr').each(function(){
                    var text = $(this).find('td').eq(index).text();
                    total += Number(text);
                });
                total_objs[index] = total;
            });
            var td_num = $('.get-sum').parent('tr').find('th').length;
            var tds = '<tr style="background-color:#4bbd00;color:white;">'
            for(var i=0;i<td_num;i++){
                var total = '';
                if(total_objs[i]!=undefined){
                    total = Number(total_objs[i]);
                }
                tds += '<td>' + total + '</td>';
            }
            tds += '</tr>';
            $('.get-sum').closest('table').append(tds);

        }
</script>
</html>