Copy only certain columns from a HTML Table

Question

Background

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.

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.

Approaches

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.

<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');

Questions

• How can I make the JavaScript to hide the columns effective only when clicking the button?
• Then I'm sure it should be possible to have this in less lines instead to have two lines per column?
• How can i show the columns after they have been copied again?

I've put this together as far as I could in this jsfiddle: https://jsfiddle.net/climber5/9ktfb53m/

Answer 1

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>