先看效果 初始化： JSON格式化 ： 生成表格-方式1 ： 生成表格-方式2 ： Excel导出 代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://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="初始化" οnclick="Init()" /> <input type="button" value="JSON格式化" οnclick="Jsonformat()" /> <input type="button" value="生成表-方式1" οnclick="Create1()" /> <input type="button" value="生成表-方式2" οnclick="Create2()" /> <input type="button" value="导出Excel" οnclick="Export()" /> <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 = []; 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='https://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>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
