前端javascript实现数据列汇总，求平均值等操作

有时前端以表格形式展示数据，需要在最后求各数据列的均值，和等操作，这些操作可以在后台实现，也可以在前端实现，下面是前端js实现的方式，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>数据统计1</title>
    <script src="/Js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="/Js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
    <script src="/Js/util.js" type="text/javascript"></script>
    <link href="/Style/defaults.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1">
        <div>
            <%--查询条件部分，略--%>
        </div>
        <div style="overflow: auto; width: 3000px;">
            <table id="tabdata">
                <thead>
                    <tr style="height: 35px;">
                       <%--表头部分，略--%>
                    </tr>
                </thead>
                <tbody id="datadetails">
                </tbody>
            </table>
        </div>

        <div id="tb_page" class="hm_tb_page" style="display: block;">
        </div>
    </form>
    <script type="text/javascript">
        $(document).ready(function () {
            GetData(pageIndex, pageSize);
            $("#bntSearch").click(function () {
                GetData(pageIndex, pageSize);
            });
        });
        function GetData(idx, size) {
            var data = {};
            data.method = "GetData";
            data.startTime = $("#tbBeginTime").val();
            data.endTime = $("#tbEndTime").val();

            ajaxProcess("/DataCount.aspx?", data, callSuccess, callError);
            function callSuccess(oRet) {
                var result = oRet.Result[0];
                if (result != null) {
                    var html = "";
                    var tr = "<tr style='height: 35px;'><td>{CountDate}</td><td>{RegUsers}</td><td>{ActiveUsers}</td></tr>";          
                    $(result).each(function () {

                        this.CountDate = this.CountDate.format("yyyy-MM-dd").substring(0, 10);
                        html += tr.format(this);
                    });
                    $("#datadetails").html(html);

					//td的个数即列数
                    var tdLen = $($('#datadetails tr')[0]).find('td').length;
					//数据的行数
                    var trLen = $('#datadetails tr').length;
					//定义数组，存放各列的和值，并初始化
                    var arrTdTotal = new Array(tdLen);
                    for (var i = 0; i < tdLen; i++) {
                        arrTdTotal[i] = 0;
                    }
                    $('#datadetails tr').each(function () {
                        var i = 0;
                        $(this).find('td').each(function () {
                            //var a1 = $(this);
                            //var b1 = $($(this)[0]);
                            //var b1val = b1.text();
                            //arrTdTotal[i] += parseInt(b1val);
                            arrTdTotal[i] += parseInt($($(this)[0]).text());

                            i = i + 1;
                        });
                    });
                    var trLast = "<tr style='height: 35px;'><td>均值</td>";
                    if (arrTdTotal) {
                        for (var i = 1; i < tdLen; i++) {
							//算平均数
                            arrTdTotal[i] = arrTdTotal[i] / trLen;
                            if (!arrTdTotal[i]) {
                                arrTdTotal[i] = 0;
                            }
                            arrTdTotal[i] = parseInt(arrTdTotal[i]);
                            trLast += "<td>" +arrTdTotal[i]+ "</td>";
                        }
                    }
                    trLast += "</tr>";
					//
                    $("#datadetails").append(trLast);

                    Pagebars($("#tb_page").show(), result.PageCount, pageSize, result.PageIndex, function (idx, size) { GetData(idx, size); }); //分页
                }
            }
            function callError(e) {
                alert(e);
            }
        }
    </script>
</body>
</html>
前端实现方式比较灵活，按此方式可以方便实现各种数据的统计。
前端javascript实现数据列汇总，求平均值等操作

猜你喜欢
