仅复制 HTML 表中的某些列

Question

背景

我有一个包含几列的表格，我想为其提供复制到剪贴板按钮。 但是，我不想复制所有列，有些列包含其他详细信息或 HTML 按钮，我想将它们从按钮中排除。

有一个想法是使列数据无法使用 CSS (https://stackoverflow.com/a/32039435/7390669) 选择，但这不起作用，因为我在表格中不仅有文本。

方法

所以我的想法是在按下按钮时隐藏我不想复制的列，也许使用这个解决方案（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');

问题

• 如何使 JavaScript 隐藏列仅在单击按钮时有效？
• 那么我确定应该可以用更少的行而不是每列有两行？
• 再次复制后如何显示列？

我在这个 jsfiddle 中尽可能地把它放在一起：https://jsfiddle.net/climber5/9ktfb53m/

Answer 1

点击按钮隐藏元素，复制后再次显示：

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>