tableexport
Version:
The simple, easy-to-implement library to export HTML tables to xlsx, xls, csv, and txt files
225 lines (201 loc) • 7.75 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ignore (rows, cols, cells)</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>IgnoreRows
<code class="small">ignoreRows: [0, 2]</code>
<span class="note"> – <code>number|number[]</code></span>
</h1>
<table id="ignore-rows-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr class="target">
<td>Thor Walton</td>
<td>Regional Director</td>
<td>45</td>
<td>$98,540</td>
</tr>
<tr>
<td>Travis Clarke</td>
<td>Software Engineer</td>
<td>30</td>
<td>$275,000</td>
</tr>
<tr class="target">
<td>Suki Burks</td>
<td>Office Manager</td>
<td>22</td>
<td>$67,670</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="disabled"></td>
<td class="disabled"></td>
<td class="disabled"></td>
<th>$441,210</th>
</tr>
</tfoot>
</table>
<p class="info">export the table to <code>.xlsx</code> and look at the contents of the <span class="target">yellow</span> rows. Compared to the export from the <b>defaults</b> table above, you will notice that <code>ignoreRows: [0, 2]</code> <i>removes the <code>tbody</code> rows at index <b>zero(0)</b> and <b>two(2)</b></i>.</p>
<p class="half">
<b>NOTE:</b> reference <a href="./headers_footers.html#headers-table"><code>headers</code></a> and <a href="./headers_footers.html#footers-table"><code>footers</code></a> if you want to remove <code>thead</code> or <code>tfoot</code> rows.
</p>
<p class="half">
<b>NOTE:</b> reference <a href="#ignore"><code>.tableexport-ignore</code></a>, <a href="#empty"><code>.tableexport-empty</code></a> if you want to customize the removal of <code>table</code> rows, columns, or cells.
</p>
<br>
</main>
<main>
<h1>IgnoreCols
<code class="small">ignoreCols: 1</code>
<span class="note"> – <code>number|number[]</code></span>
</h1>
<table id="ignore-cols-table">
<thead>
<tr>
<th>Name</th>
<th class="target">Position</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Thor Walton</td>
<td class="target">Regional Director</td>
<td>45</td>
<td>$98,540</td>
</tr>
<tr>
<td>Travis Clarke</td>
<td class="target">Software Engineer</td>
<td>30</td>
<td>$275,000</td>
</tr>
<tr>
<td>Suki Burks</td>
<td class="target">Office Manager</td>
<td>22</td>
<td>$67,670</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="disabled"></td>
<td class="target"></td>
<td class="disabled"></td>
<th>$441,210</th>
</tr>
</tfoot>
</table>
<p class="info">export the table to <code>.xlsx</code> and look at the contents of the <span class="target">yellow</span> column. Compared to the export from the <b>defaults</b> table above, you will notice that <code>ignoreCols: 1</code> <i>removes the <code>tbody</code> column at index <b>one(1)</b></i>.</p>
<p class="half">
<b>NOTE:</b> reference <a href="#ignore"><code>.tableexport-ignore</code></a>, <a href="#empty"><code>.tableexport-empty</code></a> if you want to customize the removal of <code>table</code> rows, columns, or cells.
</p>
<br>
</main>
<main>
<h1>Need control at the individual <b>cell</b> level?</h1>
<ul>
<li>
<span id="ignore" class="ignore"> </span><code>.tableexport-ignore</code>: add this class to a <code>tr</code>, <code>td</code>, or <code>th</code> to: <i>exclude/remove cells from the exported file(s).</i>
<p class="note"><b>Caution:</b> this will shift the remaining cells.</p>
</li>
<br>
<li><span id="empty" class="empty"> </span><code>.tableexport-empty</code>: add this class to a <code>tr</code>, <code>td</code>, or <code>th</code> to: <i>replace cells with an empty string in the exported file(s).</i></li>
</ul>
<table id="ignore-cell-table">
<thead>
<tr>
<th class="tableexport-empty">Name</th>
<th>Position</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableexport-empty">Thor Walton</td>
<td>Regional Director</td>
<td>45</td>
<td>$98,540</td>
</tr>
<tr>
<td>Travis Clarke</td>
<td class="tableexport-empty">Software Engineer</td>
<td class="tableexport-ignore">31</td>
<td>$275,000</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Office Manager</td>
<td>22</td>
<td>$67,670</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="disabled"></td>
<td class="disabled"></td>
<td class="disabled"></td>
<th class="tableexport-ignore">$441,210</th>
</tr>
</tfoot>
</table>
<p class="info">
The <code>ignore CSS class selector</code> can be configured with the <code>ignoreCSS</code> prototype property.
<br>
The <code>empty CSS class selector</code> can be configured with the <code>emptyCSS</code> prototype property.
</p>
<br>
</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 IgnoreRows = document.getElementById('ignore-rows-table');
new TableExport(IgnoreRows, {
ignoreRows: [0, 2]
});
// **** jQuery **************************
// $(IgnoreRows).tableExport({
// ignoreRows: [0, 2]
// });
// **************************************
var IgnoreCols = document.getElementById('ignore-cols-table');
new TableExport(IgnoreCols, {
ignoreCols: 1
});
// **** jQuery **************************
// $(IgnoreCols).tableExport({
// ignoreCols: 1
// });
// **************************************
var CustomCell = document.getElementById('ignore-cell-table');
new TableExport(CustomCell);
// **** jQuery **************************
// $(CustomCell).tableExport();
// **************************************
</script>
</body>
</html>