0

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/

Christoph Jakob
  • 1
  • 1

1 Answers1

0

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>
Paul
  • 1,936
  • 1
  • 5
  • 15