-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtableHtml.html
95 lines (95 loc) · 1.81 KB
/
tableHtml.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>excelExport</title>
<script src = 'js/jquery-2.0.0.min.js' type = 'text/javascript'></script>
<script src = 'js/xlsx.js' type = 'text/javascript'></script>
<script src = 'js/base64.js' type = 'text/javascript'></script>
<script src = 'js/fileSave.js' type = 'text/javascript'></script>
<script src = 'js/tableExport.js' type = 'text/javascript'></script>
<style>
table{
border-collapse:collapse;
width:600px;
height:180px;
margin-top:5px;
}
table, tr, td{
border:1px solid black;
}
thead > tr{
background-color: #ddd;
}
tbody tr:nth-child(2n){
background-color: #f7f7f7;
}
#export{
border:none;
font-size:16px;
background: #006400;
color:white;
cursor:pointer;
border-radius:5px;
}
</style>
</head>
<body>
<div>
<button id = 'export'>导出</button>
</div>
<table class = 'table' id = 'tablecontect'>
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>职位</td>
<td>住址</td>
<td>电话</td>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>13</td>
<td>男</td>
<td>测试</td>
<td>北京市</td>
<td>11123231</td>
</tr>
<tr>
<td>李四</td>
<td>18</td>
<td>男</td>
<td>开发</td>
<td>北京市</td>
<td>11123231</td>
</tr>
<tr>
<td>王麻子</td>
<td>13</td>
<td>男</td>
<td>测试</td>
<td>北京市</td>
<td>11123231</td>
</tr>
<tr>
<td>小李</td>
<td>13</td>
<td>男</td>
<td>测试</td>
<td>北京市</td>
<td>11123231</td>
</tr>
</tbody>
</table>
<script>
$("#export").click(function(){
if(confirm("确定导出吗？")){
$("#tablecontect").tableExport({ formats: ["xlsx"] });
}
})
</script>
</body>
</html>