[英]Copy only certain columns from a HTML Table
I have a table with several columns for which I want to provide a copy to clipboard button.我有一个包含几列的表,我想为其提供复制到剪贴板按钮。 However, I do not want to copy all columns, some contain additional details or HTML buttons and I want to exclude them from the button.
但是,我不想复制所有列,有些列包含其他详细信息或 HTML 按钮,我想从按钮中排除它们。
There is this idea to make the column data not selectable with CSS ( https://stackoverflow.com/a/32039435/7390669 ) but this does not work as I have not only text in the table.有一个想法是使用 CSS ( https://stackoverflow.com/a/32039435/7390669 )无法选择列数据,但这不起作用,因为我在表格中不仅有文本。
So my idea was to hide the columns I do not want to copy when pressing the button, maybe with this solution ( https://stackoverflow.com/a/16821979/7390669 ) then copy the table content visible (I had this in mind: https://clipboardjs.com/ --> https://stackoverflow.com/a/46763443/7390669 ) and then make the table content visible again.所以我的想法是在按下按钮时隐藏我不想复制的列,也许使用这个解决方案( https://stackoverflow.com/a/16821979/7390669 )然后复制可见的表格内容(我有这个想法: https://clipboardjs.com/ --> https://stackoverflow.com/a/46763443/7390669 ) 然后使表格内容再次可见。
<button id="copy-table-button" data-clipboard-target="#datatable">
Copy to clipboard
</button>
<table id='datatable'>
<tr>
<th>HeaderRow1Col1</th>
<th>HeaderRow1Col2</th>
<th>HeaderRow1Col3</th>
<th>HeaderRow1Col4</th>
<th>HeaderRow1Col5</th>
</tr>
<tr>
<td>dataRow2Col1</td>
<td>dataRow2Col2</td>
<td><button type="button" class="btn btn-primary">dataRow2Col3</button></td>
<td>dataRow2Col4</td>
<td><button type="button" class="btn btn-primary">dataRow2Col5</button></td>
</tr>
<tr>
<td>dataRow3Col1</td>
<td>dataRow3Col2</td>
<td><button type="button" class="btn btn-primary">dataRow3Col3</button></td>
<td>dataRow3Col4</td>
<td><button type="button" class="btn btn-primary">dataRow3Col5</button></td>
</tr>
<tr>
<td>dataRow4Col1</td>
<td>dataRow4Col2</td>
<td><button type="button" class="btn btn-primary">dataRow4Col3</button></td>
<td>dataRow4Col4</td>
<td><button type="button" class="btn btn-primary">dataRow4Col5</button></td>
</tr>
</table>
$('#datatable td:nth-child(3)').hide();
$('#datatable th:nth-child(3)').hide();
$('#datatable td:nth-child(5)').hide();
$('#datatable th:nth-child(5)').hide();
var clipboard = new ClipboardJS('#copy-table-button');
I've put this together as far as I could in this jsfiddle: https://jsfiddle.net/climber5/9ktfb53m/我在这个jsfiddle中尽可能地把它放在一起: https://jsfiddle.net/climber5/9ktfb53m/
On button click hide the elements and after copying show them again:在按钮上单击隐藏元素并在复制后再次显示它们:
const copyButton = '#copy-table-button'; const clipboard = new ClipboardJS(copyButton); // Get jQuery elems for easdy access. const nonCopyColumns = [3, 5]; const $nonCopyColumns = $(nonCopyColumns.map(col => `#datatable td:nth-child(${col}), #datatable th:nth-child(${col})` ).join(",")); // before copy hide cols which should not be copied. const beforeCopy = () => $nonCopyColumns.hide(); // after copy show those cols again and clear the selection. const afterCopy = (e) => { $nonCopyColumns.show(); e.clearSelection(); } $(copyButton).click(beforeCopy); clipboard.on('success', afterCopy) clipboard.on('error', afterCopy)
table, th, td { border: 1px solid black; } th { font-weight: bold; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script> <button id="copy-table-button" data-clipboard-target="#datatable"> Copy to clipboard </button> <table id='datatable'> <tr> <th>HeaderRow1Col1</th> <th>HeaderRow1Col2</th> <th>HeaderRow1Col3</th> <th>HeaderRow1Col4</th> <th>HeaderRow1Col5</th> </tr> <tr> <td>dataRow2Col1</td> <td>dataRow2Col2</td> <td><button type="button" class="btn btn-primary">dataRow2Col3</button></td> <td>dataRow2Col4</td> <td><button type="button" class="btn btn-primary">dataRow2Col5</button></td> </tr> <tr> <td>dataRow3Col1</td> <td>dataRow3Col2</td> <td><button type="button" class="btn btn-primary">dataRow3Col3</button></td> <td>dataRow3Col4</td> <td><button type="button" class="btn btn-primary">dataRow3Col5</button></td> </tr> <tr> <td>dataRow4Col1</td> <td>dataRow4Col2</td> <td><button type="button" class="btn btn-primary">dataRow4Col3</button></td> <td>dataRow4Col4</td> <td><button type="button" class="btn btn-primary">dataRow4Col5</button></td> </tr> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.