JSON格式化 动态生成表格 表格转置 行列转换 Excel导出 行求和 列求和
不需要行求和、列求和的查看 JSON格式化 动态生成表格 表格转置 行列转换 Excel导出
接上篇，新增行求和、列求和
完整代码如下：
<!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>
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
body
{
text-align: center;
}
div
{
margin: 0 auto;
width: 600px;
}
table
{
border-collapse: collapse;
margin: 0 auto;
text-align: center;
}
table td, table th
{
border: 1px solid #cad9ea;
color: #666;
height: 30px;
}
table thead th
{
background-color: #CCE8EB;
width: 100px;
}
table tr:nth-child(odd)
{
background: #fff;
}
table tr:nth-child(even)
{
background: #F5FAFA;
}
</style>
</head>
<body>
<div>
<input type="button" value="初始化" onclick="Init()" />
<input type="button" value="JSON格式化" onclick="Jsonformat()" />
<input type="button" value="生成表-方式1" onclick="Create1()" />
<input type="button" value="生成表-方式2" onclick="Create2()" />
<input type="button" value="导出Excel" onclick="Export()" />
<input type="button" value="行求和" onclick="RowSum()" />
<input type="button" value="列求和" onclick="ColSum()" />
<br />
<textarea id="jsonStr" style="width: 600px; height: 500px;">[{"指标":"指标","组织1":"组织1","组织2":"组织2","组织3":"组织3"},{"指标":"指标1","组织1":"1","组织2":"21","组织3":"31"},{"指标":"指标2","组织1":"2","组织2":"22","组织3":"32"},{"指标":"指标3","组织1":"3","组织2":"23","组织3":"33"},{"指标":"指标4","组织1":"4","组织2":"24","组织3":"34"}]</textarea>
</div>
<br />
<table id="tbinfo">
<thead>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
var tbinfo = [];
var tbinfo2 = [];
var total_rows = 0;
var total_cols = 0;
function Init() {
$("#jsonStr").val('[{"指标":"指标","组织1":"组织1","组织2":"组织2","组织3":"组织3"},{"指标":"指标1","组织1":"1","组织2":"21","组织3":"31"},{"指标":"指标2","组织1":"2","组织2":"22","组织3":"32"},{"指标":"指标3","组织1":"3","组织2":"23","组织3":"33"},{"指标":"指标4","组织1":"4","组织2":"24","组织3":"34"}]');
$("#tbinfo thead").html("");
$("#tbinfo tbody").html("");
}
function Jsonformat() {
try {
str = $("#jsonStr").val();
tbinfo = JSON.parse(str);
$("#jsonStr").val(JSON.stringify(tbinfo, null, '\t'));
} catch (e) {
alert("json格式不正确");
return false;
}
}
function Create1() {
try {
str = $("#jsonStr").val();
tbinfo = JSON.parse(str);
} catch (e) {
alert("json格式不正确");
return false;
}
var thead = "";
var cols = [];
var tbody = "";
$.each(tbinfo, function (row, n) {
if (row == 0) {
cols = Object.keys(n);
thead = thead + "<tr>";
for (var i = 0; i < cols.length; i++) {
thead = thead + "<th>" + n[cols[i]] + "</th>";
}
thead = thead + "</tr>";
$("#tbinfo thead").html(thead);
} else {
tbody = tbody + "<tr>";
for (var i = 0; i < cols.length; i++) {
tbody = tbody + "<td lw-row='" + row + "' lw-col='" + i + "' >" + n[cols[i]] + "</td>";
}
tbody = tbody + "</tr>";
}
});
$("#tbinfo tbody").html(tbody);
total_rows = $("#tbinfo tr").length;
total_cols = $("#tbinfo tr").find("th").length;
}
function Create2() {
try {
str = $("#jsonStr").val();
tbinfo = JSON.parse(str);
} catch (e) {
alert("json格式不正确");
return false;
}
tbinfo2 = [];
var cols = Object.keys(tbinfo[0]);
for (var i = 0; i < cols.length; i++) {
var tr = {};
$.each(tbinfo, function (index, n) {
tr[index] = n[cols[i]];
});
tbinfo2.push(tr);
}
var thead = "";
var cols = [];
var tbody = "";
$.each(tbinfo2, function (row, n) {
if (row == 0) {
cols = Object.keys(n);
thead = thead + "<tr>";
for (var i = 0; i < cols.length; i++) {
thead = thead + "<th>" + n[cols[i]] + "</th>";
}
thead = thead + "</tr>";
$("#tbinfo thead").html(thead);
} else {
tbody = tbody + "<tr>";
for (var i = 0; i < cols.length; i++) {
tbody = tbody + "<td lw-row='" + row + "' lw-col='" + i + "' >" + n[cols[i]] + "</td>";
}
tbody = tbody + "</tr>";
}
});
$("#tbinfo tbody").html(tbody);
total_rows = $("#tbinfo tr").length;
total_cols = $("#tbinfo tr").find("th").length;
}
function Export() {
if ($("#tbinfo tbody tr").size() == 0) {
alert("无数据");
} else {
tableToExcel("tbinfo", "测试");
}
}
function base64(content) {
return window.btoa(unescape(encodeURIComponent(content)));
}
function tableToExcel(tableID, fileName) {
var excelContent = $("#" + tableID).html();
var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
excelFile += "<head><meta charset='utf-8'><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>sheet1</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>";
excelFile += "<body><table width='10%' border='1'>";
excelFile += excelContent;
excelFile += "</table></body>";
excelFile += "</html>";
var link = "data:application/vnd.ms-excel;base64," + base64(excelFile);
var a = document.createElement("a");
a.download = fileName + ".xls";
a.href = link;
a.click();
}
function RowSum() {
if ($("#tbinfo tbody tr").size() == 0) {
alert("无数据");
return false;
}
var cols = $("#tbinfo tr").find("th").length;
var rows = $("#tbinfo tr").length;
var total_row = "";
if (total_cols < cols) {
for (var i = 0; i < rows; i++) {
if (i == 0) {
$("#tbinfo tr").eq(i).find("th:last").remove();
} else {
$("#tbinfo tr").eq(i).find("td:last").remove();
}
}
cols = cols - 1;
}
for (var i = 0; i < rows; i++) {
if (i == 0) {
total_row = "<th lw-row='" + i + "' lw-col='" + cols + "'>合计</th>";
} else {
total_row = "<td lw-row='" + i + "' lw-col='" + cols + "'>" + getSum($("#tbinfo td[lw-row='" + i + "']:gt(0)")) + "</td>";
}
$("#tbinfo tr").eq(i).append(total_row);
}
}
function ColSum() {
if ($("#tbinfo tbody tr").size() == 0) {
alert("无数据");
return false;
}
var cols = $("#tbinfo tr").find("th").length;
var rows = $("#tbinfo tr").length;
var total_tr = "";
if (total_rows < rows) {
$("#tbinfo tr:last").remove();
rows = rows - 1;
}
total_tr = total_tr + "<tr>";
for (var i = 0; i < cols; i++) {
if (i == 0) {
total_tr = total_tr + "<td lw-row='" + rows + "' lw-col='" + i + "'>合计</td>";
} else {
total_tr = total_tr + "<td lw-row='" + rows + "' lw-col='" + i + "' >" + getSum($("#tbinfo td[lw-col='" + i + "']")) + "</td>";
}
}
total_tr = total_tr + "</tr>";
$("#tbinfo tbody").append(total_tr);
}
function getSum(items) {
var sum = 0;
$.each(items, function (i, n) {
console.log(Number($(n).html()));
sum = sum + Number($(n).html());
});
return sum;
}
</script>
</body>
</html>
JSON格式化 动态生成表格 表格转置 行列转换 Excel导出 行求和 列求和的更多相关文章
- 跨域jsonp+jQuery+json+html动态生成表格
1.什么是跨域 浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了. 凡是拥有scr这个属性 ...
- .net core将URL请求格式化为XML或JSON(网站动态生成sitemap.xml)
.net core将URL请求格式化为XML或JSON(网站动态生成sitemap.xml) 首先设置 Startup.cs 文件 配置 ConfigureServices services .Add ...
- angular js根据json文件动态生成路由状态
项目上有一个新需求,就是需要根据json文件动态生成路由状态,查阅了一下资料,现在总结一下发出来: 首先项目用到的是angular的UI-路由,所以必须引入angular.js和angular-ui- ...
- Jquery解析Json字符串,并且动态生成数据表格Table
//ajax获得后台传来的json字符串 $.post("UserInfo.ashx", function (data) { //假设data="{T1:[{User_I ...
- js将json数据动态生成表格
今天开发中遇到需要展示动态数据的问题, 具体要求是后端传来的json字符串,要在前端页面以table表格的形式展示, 其实没啥难的,就是拼接table标签,纯属体力活,于是自己写了个呆萌,保存起来,以 ...
- VUE动态生成table表格（element-ui）(新增/删除)
(直接复制即可测试) 结构(红色部分 data/prop/v-model 数据绑定): <template> <el-table size="small" :da ...
- jQuery动态生成Bootstrap表格
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- .Net Mvc 返回Json，动态生成EasyUI Tree
最近做一个项目,开始接触EasyUI,感觉很强大,很适合我这种对前台不是很感冒的人.在学习Tree的过程中,感觉网上的资料挺乱的,很多只是把EasyUI API 抄了一遍.现在把最近这段时间的学到的, ...
- jsp页面根据json数据动态生成table
根据需求由于不同的表要在同一个jsp展示,点击某个表名便显示某张表内容,对于java后台传给jsp页面的json形式的数据是怎么动态生成table的呢? 找了好久,终于找到某位前辈的答案,在此表示衷心 ...
- java动态生成带下拉框的Excel导入模板
在实际开发中,由于业务需要,常常需要进行Excel导入导出操作.以前做一些简单的导入时,先准备一个模板,再进行导入,单有十几. 二十几个导入模板时,往往要做十几.二十几个模板.而且,当在模板中需要有下 ...
随机推荐
- NC14698 模拟战役
题目链接 题目 题目描述 齐齐和司机在玩单机游戏<红色警戒IV>,现在他们的游戏地图被划分成一个n*m的方格地图.齐齐的基地在最上方的4行格内,司机的基地在最下方的4行格内.他们只有一种攻 ...
- hdparm 常用命令介绍
hdparm命令介绍 通常情况下可以使用fdisk.df等命令查看硬盘的分区情况以及当前已使用空间大小.剩余空间大小等信息.但是如果要查看硬盘的硬件信息如 硬盘型号.序列号.已运行时间等信息该用什么工 ...
- Swoole从入门到入土(13)——HTTP服务器[配置]
开篇之前,先复习一下如何为一个server进行配置的设置: $server->set(array( 'key' => 'value' )); 配置说明: upload_tmp_dir:设置 ...
- Python之初级RPG小游戏
在国外网站上找到一个练习Python的小游戏感觉不错,自己实现了一下. 通过该练习你能学到: 元组 字典 简单定义函数和封装 条件控制语句 游戏说明 以下是3个房间和1个花园: Hall 客厅 有一把 ...
- jsp中无法识别EL表达式问题
今天在开发系统时需要在JSP中遍历List<javabean>,其中用到了EL表达式:${item.value} 页面死活不出数据,只显示表达式本身:${item.value}. 页面代码 ...
- 【Azure 媒体服务】Azure Media Service上传的视频资产，如何保证在Transfer编码后音频文件和视频文件不分成两个文件？保持在一个可以直接播放的MP4文件中呢？
问题描述 Azure Media Service上传的视频资产,如何保证在Transfer编码后音频文件和视频文件不分成两个文件?保持在一个可以直接播放的MP4文件中呢? 问题解答 Azure Med ...
- 【Azure Redis 缓存】Azure Cache for Redis 是否记录具体读/写(Get/Set)或删除(Del)了哪些key呢？
问题描述 在Azure Redis的门户活动日志中,可以查看到的是对于Redis资源本身的操作.但是对于客户端连接到Redis服务后,对服务所做出的读写,或删除操作,是否有日志可以查看到呢? 问题回答 ...
- 浅入Kubernetes(4)：使用Minikube体验
Minikube 打开 https://github.com/kubernetes/minikube/releases/tag/v1.19.0 下载最新版本的二进制软件包(deb.rpm包),再使用 ...
- HashMap很美好，但线程不安全怎么办？ConcurrentHashMap告诉你答案！
写在开头 在<耗时2天,写完HashMap>这篇文章中,我们提到关于HashMap线程不安全的问题,主要存在如下3点风险: 风险1: put的时候导致元素丢失:如两个线程同时put,且ke ...
- body标签下莫名奇妙多了一行空行，原来是编码的问题
之前为了方便,直接在服务器修改文件,然后点保存,但是问题来了,在顶部莫名奇妙多了一个空行,如图1 图1 原来在源代码编辑的代码如图2 图2 但是在FF或者Chrome外部样式却在body里面,而不是h ...