tableexport
Version:
The simple, easy-to-implement library to export HTML tables to xlsx, xls, csv, and txt files
197 lines (178 loc) • 5.58 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rowspan / Colspan</title>
<link href="../dist/css/tableexport.min.css" rel="stylesheet">
<link href="./examples.css" rel="stylesheet">
</head>
<body>
<noscript>
<iframe src="//www.googletagmanager.com/ns.html?id=GTM-TL44T9" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<a id="example-link" href="./"> << Examples</a>
<iframe src="./defaults.html" frameborder="0" width="100%" scrolling="no" onload="this.height=screen.height/2.5;"></iframe>
<main>
<h1>Rowspan / Colspan</h1>
<table id="rowspan-colspan-table-1">
<tbody>
<tr style="background: lightblue">
<td rowspan="3" colspan="3">
[0, 0-2] [1, 0-2]
</td>
<td>[0, 3]</td>
</tr>
<tr style="background: lightgoldenrodyellow">
<td>[1, 3]</td>
</tr>
<tr style="background: lightgreen">
<td>[2, 3]</td>
</tr>
<tr style="background: lightcoral">
<td>[2, 0]</td>
<td>[2, 1]</td>
<td>[2, 2]</td>
<td>[2, 3]</td>
</tr>
</tbody>
</table>
</main>
<br>
<main>
<h1>Rowspan</h1>
<table id="rowspan-colspan-table-2">
<tbody>
<tr>
<td rowspan="2">
2016-11-15
</td>
<td>会员卡</td>
<td rowspan="3">办卡</td>
<td rowspan="2">两年卡</td>
<td>李欢</td>
<td rowspan="4">12345678901</td>
<td rowspan="2">刷卡支付</td>
<td>1000</td>
</tr>
<tr>
<td>现金</td>
<td>1980</td>
<td>1980</td>
</tr>
<tr>
<td rowspan="1">2016-11-15</td>
<td rowspan="1">会员卡</td>
<td rowspan="1">两年卡</td>
<td rowspan="1">Treating myself</td>
<td rowspan="1">13858060001</td>
<td>刷卡支付</td>
</tr>
<tr>
<td rowspan="1">2016-11-15</td>
<td rowspan="1">会员卡</td>
<td rowspan="1">两年卡</td>
<td rowspan="1">Treating myself</td>
<td rowspan="1">13858060001</td>
<td>刷卡支付</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
</main>
<br>
<main>
<h1>Colspan</h1>
<table id="rowspan-colspan-table-3">
<thead>
<tr>
<td>1</td>
<td colspan="2">1</td>
<td colspan="3">2</td>
<td>3</td>
<td colspan="1">3</td>
<td>3</td>
<td colspan="3">4</td>
</tr>
</thead>
<tbody>
<tr>
<td>刷卡支付</td>
<td>刷卡支付</td>
<td>刷卡支付</td>
<td>刷卡支付</td>
<td>刷卡支付</td>
<td>刷卡支付</td>
<td>刷卡支付</td>
<td>刷卡支付</td>
<td>刷卡支付</td>
<td>1000</td>
<td>1001</td>
<td>1002</td>
</tr>
<tr>
<td>刷卡支付</td>
<td>刷卡支付</td>
<td>刷卡支付</td>
<td>刷卡支付</td>
<td>刷卡支付</td>
<td>刷卡支付</td>
<td>刷卡支付</td>
<td>刷卡支付</td>
<td>刷卡支付</td>
<td>1000</td>
<td>1001</td>
<td>1002</td>
</tr>
<tr>
<td colspan="12">会员卡</td>
</tr>
</tbody>
</table>
</main>
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../bower_components/js-xlsx/dist/xlsx.core.min.js"></script>
<script type="text/javascript" src="../bower_components/blobjs/Blob.min.js"></script>
<script type="text/javascript" src="../bower_components/file-saverjs/FileSaver.min.js"></script>
<script type="text/javascript" src="../dist/js/tableexport.min.js"></script>
<script type="text/javascript" src="../assets/js/analytics.js"></script>
<script>
var RowColSpan1 = document.getElementById('rowspan-colspan-table-1');
new TableExport(RowColSpan1, {
formats: ['xlsx', 'xls', 'csv', 'txt']
});
// **** jQuery **************************
// $(RowColSpan1).tableExport({
// formats: ['xlsx', 'xls', 'csv', 'txt']
// });
// **************************************
var RowColSpan2 = document.getElementById('rowspan-colspan-table-2');
new TableExport(RowColSpan2, {
formats: ['xlsx', 'xls', 'csv', 'txt']
});
// **** jQuery **************************
// $(RowColSpan2).tableExport({
// formats: ['xlsx', 'xls', 'csv', 'txt']
// });
// **************************************
var RowColSpan3 = document.getElementById('rowspan-colspan-table-3');
new TableExport(RowColSpan3, {
formats: ['xlsx', 'xls', 'csv', 'txt']
});
// **** jQuery **************************
// $(RowColSpan3).tableExport({
// formats: ['xlsx', 'xls', 'csv', 'txt']
// });
// **************************************
</script>
</body>
</html>