Select a Complete Table with JavaScript (To Be Copied to Clipboard)

Select a complete table with Javascript (to be copied to clipboard)

Yes. It's not too tricky, and the following will work in all mainstream browsers (including IE 6, and indeed 5):

(Updated 7 September 2012 after Jukka Korpela's comment pointing out that the previous version didn't work in IE 9 standards mode)

Demo: http://jsfiddle.net/timdown/hGkGp/749/

Code:

function selectElementContents(el) { var body = document.body, range, sel; if (document.createRange && window.getSelection) {  range = document.createRange();  sel = window.getSelection();  sel.removeAllRanges();  try {   range.selectNodeContents(el);   sel.addRange(range);  } catch (e) {   range.selectNode(el);   sel.addRange(range);  } } else if (body.createTextRange) {  range = body.createTextRange();  range.moveToElementText(el);  range.select(); }}

<table id="tableId" border="1"> <thead>  <tr><th>Heading 1</th><th>Heading 2</th></tr> </thead> <tbody>  <tr><td>cell 1</td><td>cell 2</td></tr> </tbody></table>
<input type="button" value="select table" onclick="selectElementContents( document.getElementById('tableId') );">

How to copy HTML table to clipboard with js and avoid initial and final blank line in plain text?

While I don't know the reason, adding a <tbody> element and selecting that one seems to be a possible workaround:

let table = document.querySelector('#testTable');
let button = document.querySelector('#button');

function selectNode(node) {
  let range = document.createRange();
  range.selectNodeContents(node)
  let select = window.getSelection()
  select.removeAllRanges()
  select.addRange(range)
}
button.addEventListener('click', function() {
  selectNode(table);
  document.execCommand('copy')

})

<style>
  td {
    border: 1px solid black;
  }
</style>

<table>
  <tbody id='testTable'>
    <tr>
      <td>test1</td>
      <td> </td>
      <td>test2</td>
    </tr>
    <tr>
      <td>test3</td>
      <td> </td>
      <td>test4</td>
    </tr>
  </tbody>
</table>
<br>
<button id="button">select</button>

Copy table rows to clipboard- copying only the first page

It can be done by JavaScript only.

It can be done in two step:

Step 1 : Select table get using selection command

Step 2 : Apply clipboard using document.execCommand("copy");

Please check below :

 function selectElementContents(el) {        var body = document.body, range, sel;        if (document.createRange && window.getSelection) {            range = document.createRange();            sel = window.getSelection();            sel.removeAllRanges();            try {                range.selectNodeContents(el);                sel.addRange(range);            } catch (e) {                range.selectNode(el);                sel.addRange(range);            }            document.execCommand("copy");
        } else if (body.createTextRange) {            range = body.createTextRange();            range.moveToElementText(el);            range.select();            range.execCommand("Copy");        }    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableId">    <thead>        <tr><th>Heading 1</th><th>Heading 2</th></tr>    </thead>    <tbody>        <tr><td>cell 1</td><td>cell 2</td></tr>        <tr><td>cell 3</td><td>cell 4</td></tr>    </tbody></table>
<input type="button" value="select table"   onclick="selectElementContents( document.getElementById('tableId') );">

Selecting whole table/text for copying to clipboard

I've never used it, but there is a jQuery clipboard plugin that could suit your needs. It sounds like it would copy something to the clipboard, but should work cross-browser. The code would be something like

$.clipboard($('#tableContainer').html()); 

Edit: I just noticed that this solution would require non-IE browsers to have Flash installed, which is inconvenient as best and makes it unusable at worst. The only way I could think to do this without having the browser access the clip board would be to display a hidden textarea control with the results of this call:

$('#tableContainer').html()

and then allow the user to select all the text and copy it. It would work, but not be as elegant as the plugin solution.

Clipboard copy of table row

You could create a temporary <textarea>, go through all your <td> and paste their text into this <textarea>.

Then select everything, copy it and remove the temporary <textarea>:

$(".copy-btn").click(function() {  let tmpElement = $('<textarea style="opacity:0;"></textarea>');  let parent = $(this).closest('td').siblings().each(function(){    tmpElement.text(tmpElement.text() + $(this).text() + '\t');  });    tmpElement.appendTo($('body')).focus().select();  document.execCommand("copy");  tmpElement.remove();});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table border='1'>  <tr id="row-1" class="parent-row">    <td><button class="copy-btn">Copy</button></td>    <td> Tester</td>    <td>xsample@gmail.com</td>    <td>12121</td>    <td>1000</td>    <td><a class="fancybox" href="/uploads/89197934977.jpeg">img</a></td>    <td>2018-07-19</td>    <td><span>new</span></td>  </tr>
  <tr id="row-2" class="parent-row">    <td><button class="copy-btn">Copy</button></td>    <td> Tester 2</td>    <td>xsample2@gmail.com</td>    <td>145345</td>    <td>1050</td>    <td><a class="fancybox" href="/uploads/89197955551.jpeg">img</a></td>    <td>2018-07-20</td>    <td><span>new</span></td>  </tr></table>

Copy table data to clipboard button on with select column only

Here is a full example of datatables copy button with export options column selector:

<html>
    <head>
        <script
                  src="https://code.jquery.com/jquery-3.6.0.min.js"
                  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
                  crossorigin="anonymous"></script>
                  
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
      
        <link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
     
        <script type="text/javascript" src="DataTables/datatables.min.js"></script>
    </head>
    <body>  
        <table id="table_id">
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>aa</td>
                    <td>bb</td>
                    <td>cc</td>
                </tr>
                <tr>
                    <td>dd</td>
                    <td>ee</td>
                    <td>ff</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

<script>
    
    
    $( document ).ready(function() {
        $('#table_id').DataTable(   
            {           
                dom: 'Bfrtip',
                buttons: [
                    {
                        extend: 'copy',
                        text: 'Copy some column without headers',
                        header: false,          // Disable export header tabla
                        exportOptions: {
                            columns: [0,1]      // Select columns to be exported
                        },
                        title: null             // Disable title on exported data
                    }
                ]
            } 
        );
    });
</script>

And the output is:

aa  bb
dd  ee

Copy the hidden table into clipboard

It is a hack, but perhaps you could set opacity: 0 when clicking the button, and removing the display: none?

OR

Detach the table and then remove the display: none.

---

Related Topics