需要行求和、列求和功能的查看
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">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
text-align: center;
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>
<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()" />
<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>
<table id="tbinfo">
<thead>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
var tbinfo = [];
var tbinfo2 = [];
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 (i, n) {
if (i == 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>" + n[cols[i]] + "</td>";
tbody = tbody + "</tr>";
$("#tbinfo tbody").html(tbody);
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 (i, n) {
if (i == 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>" + n[cols[i]] + "</td>";
tbody = tbody + "</tr>";
$("#tbinfo tbody").html(tbody);
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();
</script>
</body>
</html>
先看效果<!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> <scrip...
<!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">
DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
为了练习和使用js中的创建节点、追加节点以及练习生成json对象和遍历集合。对现阶段学习到的js中的DOM文档对象模型进行阶段总结并进行实践练习。
使用json对象的形式创建table表格
我们先来想一想如何进行实现，实现的步骤有哪几步。
首先我们需要生成一个table，并将这个元素节点追加到body中。
声明json个格式的字符串，申明json对象
根据json对象的长度进行循环，每一次循环都生成一个tr，并将tr追加到table中去。
对json对象中的元素进行遍历，并生成td将元素赋值到td中
文件data.text[{"name":"john","age":12},
{"name":"peter","age":12},
{"name":"marry","age":14},
文件test.
html
需求：(1).ajax取得json对象数组后，根据数组内所有json对象的所有key和value生成相应的表格标题和表格数据；
(2).不显示json数据的某些key；
(3).对某些key进行先后排序显示。
2.js代码：
(function(){$("#queryButton").bind('click',function() {$.ajax({
url:"...",
type:"POST
import com.fasterxml.jackson.core.
JsonFactory;
import com.fasterxml.jackson.core.
JsonParseException;
import com.fasterxml.jackson
