有时前端以表格形式展示数据,需要在最后求各数据列的均值,和等操作,这些操作可以在后台实现,也可以在前端实现,下面是前端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>
前端实现方式比较灵活,按此方式可以方便实现各种数据的统计。