JQuery - How to trigger user-select:text in every td element inside a table?

Question

I wanted to highlight all text inside a table. I've put user-select:text in my css and I am able to manually highlight the text inside the td.

td{
    user-select: text;
}

but how can I automate the highlighting?

PS:

There are only text in every cell of the table, no images etc.
I wanted to be able to copy all the text in the table.

Possible duplicate of [Use jQuery select() to select contents of a div](https://stackoverflow.com/questions/9975707/use-jquery-select-to-select-contents-of-a-div) — Anurag Srivastava, Mar 18 '19 at 07:38

score 3 · Accepted Answer · answered Mar 18 '19 at 07:47

window.getSelection().selectAllChildren( document.getElementById('markME') );

<table id="markME">
<tbody>
  <tr>
    <td>1231</td>
    <td>1231</td>
    <td>1231</td>
    <td>1231</td>
    <td>1231</td>    
  </tr>
</tbody>
</table>

Reference of Selection

score 0 · Answer 2 · answered Mar 19 '19 at 01:44

I wanted to be able to copy all the text in the table.

I have a though that you also want to automate the copying into clipboard of the content of the table, if so you can do it with the following;

$('#btn-copy').on('click', function(){
  
  //(1) - Get the html code of the table and insert into variable contentToCopy
  var contentToCopy = $('#your-table')[0].outerHTML;

//(2) - insert the html code into our hidden TextArea, notice I used html instead of val to preserve the html code
$('#hiddenTextarea').html(contentToCopy);

//(3) - by using select, we hightlight all the value inside our hidden TextArea
$('#hiddenTextarea').select();
  
  if(document.execCommand('copy')){ //finally copy the value of our hidden TextArea into clipboard by using function document.execCommand('copy')
   alert('Copied! You may now paste it to excel, word, etc.');     
 }
});

/*Optional, I just want to make content clear*/
table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid #DDD;
  padding: 5px;
}

/*We hide the Textarea by using absolute and position it to the left by negative 1000*/
#hiddenTextarea{
  position: absolute;
  left: -1000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="your-table">
<tbody>
  <tr>
    <td>Content 1</td>
    <td>Content 2</td>
    <td>Content 3</td>    
  </tr>
</tbody>
</table>

<textarea id="hiddenTextarea"></textarea>

<br/>
<button id="btn-copy">Copy to Clipboard</button>

JQuery - How to trigger user-select:text in every td element inside a table?

2 Answers2