"从 html 表中导出过滤后的数据"

Question

我正在尝试导出一个能够被过滤的 html 表。 我已经有一个工作代码，见下文。 不幸的是，我只能导出整个表，但我只想导出过滤后的数据。 您可以在下面看到工作片段。 我希望有人可以帮助我只导出过滤后的数据。 如果您对如何解决此问题有任何其他想法，欢迎我也使用其他代码来解决此问题。

 <style> table#foobar-table thead { position: sticky; } table#foobar-table thead { inset-block-start: 0; } table#foobar-table, table#foobar-table > thead > tr > th, table#foobar-table > tbody > tr > td { border: Solid 1px #888888; padding: 5px; } table#foobar-table > thead > tr { background-color: #FFAE5E; } table#foobar-table > tbody > tr:nth-child(even) { background-color: #FFFFFF; } table#foobar-table > tbody > tr:nth-child(odd) { background-color: #FFD2A6; } #foobar-table { margin-left: 50px; } .resizer { position: Absolute; top: 0; right: 0; width: 5px; cursor: w-resize; user-select: None; } </style> <table id="foobar-table"> <thead> <tr> <th>Nr.</th> <th>Vorname</th> <th>Name</th> <th>Alter</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Andrea</td> <td>Ross</td> <td>18</td> </tr> <tr> <td>2</td> <td>Penelope</td> <td>Mills</td> <td>36</td> </tr> <tr> <td>3</td> <td>Sarah</td> <td>Grant</td> <td>14</td> </tr> </tbody> </table> <p> <label>Filter: <input type="search" class="filter-table" data-for="#foobar-table" autofocus="autofocus"></label> </p> <p><button class=button id="export">Exportieren</button></p> <script> // HTML-Tabelle filtern document.querySelectorAll('.filter-table').forEach(function(input) { var table = document.querySelector(input.dataset.for); var rows = table.querySelectorAll('tbody tr'); input.addEventListener('input', function(event) { rows.forEach(function(tr) { tr.hidden = !tr.textContent.includes(input.value); }); }); }) </script> <script> // HTML-Tabelle als CSV-Datei exportieren document.addEventListener('DOMContentLoaded', function() { const table = document.getElementById('foobar-table'); const exportBtn = document.getElementById('export'); const toCsv = function(table) { const rows = table.querySelectorAll('tr'); return [].slice.call(rows) .map(function(row) { const cells = row.querySelectorAll('th,td'); return [].slice.call(cells) .map(function(cell) { return cell.textContent; }) .join(','); }) .join('\\n'); }; const download = function(text, fileName) { const link = document.createElement('a'); link.setAttribute('href', `data:text/csv;charset=utf-8,${encodeURIComponent(text)}`); link.setAttribute('download', fileName); link.style.display = 'none'; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; exportBtn.addEventListener('click', function() { const csv = toCsv(table); download(csv, 'download.csv'); }); }); </script>