<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>excel example</title>
<script type="text/javascript" src="generic/build/jquery-2.1.1.js"></script>
<style>
#app {
padding: 32px;
}
</style>
</head>
<body>
<div id="app">
excel实验开始 <input type="button" value="excel模板解析"
onclick="parseExcel()" /> <input type="button" value="excel模板渲染"
onclick="parseDraw()" />
<table id="test" border="1" style="border-collapse: collapse;">
<tr height='67px'><td rowspan=1 width=148px colspan=7 style="text-align: center;background-color: #ffe59a;color: #0170c1;font-family: Arial;font-size: 36px;font-weight: bold" >这是标题</td></tr><tr height='47px'><td rowspan=1 width=148px colspan=3 style="text-align: center;background-color: #c00000;border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000;font-size: 24px;font-weight: bold" >这是二级标题1</td><td rowspan=1 width=162px colspan=2 style="text-align: center;background-color: #fe0000;border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000;font-size: 24px;font-weight: bold" >这是二级标题2</td><td rowspan=1 width=171px colspan=2 style="text-align: center;background-color: #fdc101;border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000;font-size: 24px;font-weight: bold" >这是二级标题3</td></tr><tr height='41px'><td rowspan=1 width=148px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000;font-size: 14px" >这是三级标题1</td><td rowspan=1 width=139px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000;font-size: 14px" >这是三级标题2</td><td rowspan=2 width=152px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000;font-size: 14px" >这是三级标题3</td><td rowspan=1 width=162px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000;font-size: 14px" >这是三级标题4</td><td rowspan=1 width=195px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000;font-size: 14px" >这是三级标题5</td><td rowspan=2 width=171px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000;font-size: 14px" >这是三级标题6</td><td rowspan=1 width=215px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000;font-size: 14px" >这是三级标题7</td></tr><tr height='42px'><td rowspan=1 width=148px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >123</td><td rowspan=1 width=139px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >123</td><td rowspan=1 width=162px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >123</td><td rowspan=1 width=195px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >123</td><td rowspan=1 width=215px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >123</td></tr><tr height='0px'><td rowspan=1 width=148px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds-11</td><td rowspan=1 width=139px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds-12</td><td rowspan=1 width=152px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds-13</td><td rowspan=1 width=162px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds-14</td><td rowspan=1 width=195px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds-15</td><td rowspan=1 width=171px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds-16</td><td rowspan=1 width=215px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds-17</td></tr><tr height='0px'><td rowspan=1 width=148px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds-11</td><td rowspan=1 width=139px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds-12</td><td rowspan=1 width=152px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds-13</td><td rowspan=1 width=162px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds-14</td><td rowspan=1 width=195px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds-15</td><td rowspan=1 width=171px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds-16</td><td rowspan=1 width=215px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds-17</td></tr><tr height='0px'><td rowspan=1 width=148px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds-11</td><td rowspan=1 width=139px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds-12</td><td rowspan=1 width=152px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds-13</td><td rowspan=1 width=162px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds-14</td><td rowspan=1 width=195px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds-15</td><td rowspan=1 width=171px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds-16</td><td rowspan=1 width=215px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds-17</td></tr><tr height='0px'><td rowspan=1 width=148px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >填报字段1</td><td rowspan=1 width=139px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds1-11</td><td rowspan=2 width=152px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >填报字段2</td><td rowspan=2 width=162px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds1-13</td></tr><tr height='0px'><td rowspan=1 width=148px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >填报字段3</td><td rowspan=1 width=139px colspan=1 style="border-bottom-style:thin;border-bottom-color: #000;border-left-style:thin;border-left-color: #000;border-top-style:thin;border-top-color: #000;border-right-style:thin;border-right-color: #000" >ds1-12</td></tr>
</table>
</div>
<script>
$(function() {
alert("欢迎使用jquery");
})
function parseExcel() {
//alert("模板解析事件");
$.ajax({
type : "GET",
url : "/skboot/sys/sysExcelParse/parse",
success : function(msg) {
$("#test").html(msg.result);
}
});
}
function parseDraw() {
alert("模板绘制");
}
</script>
</body>
</html>