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

user_102957 0
Viewed 83736

I was wondering if anybody knows how to select using js the complete table, so that the user can right-click on the selection, copy it to the clipboard and then paste it on Excel. If you select the table manually, the process works perfectly. But sometimes, if the table height is a few times larger than the screen, selecting it dragging the mouse gets tedious. So, I want to give the users the possibility to click on a "select the whole table" button and everything gets ready to be copied.

Any ideas?

highlight select javascript
4 Answers

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

user_961000

Here is what I have used. It also make the copy command so all you have to do is use the paste command in the document you want to place it into. Basically you wrap the content you want to copy in a div, grab it using innerHTML and copy it to the clipboard. I have not tested it on all browsers but it works in Chrome, Safari, Firefox. 

<div id="copycontent">
<table>
</table>
</div>
<input type="button" value="Mark table"    onclick="SelectContent('copycontent');">

<script type="text/javascript">
function SelectContent (el) {    
  var aux = document.createElement("div");
  aux.setAttribute("contentEditable", true);
  aux.innerHTML = document.getElementById("main").innerHTML;
  aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)"); 
  document.body.appendChild(aux);
  aux.focus();
  document.execCommand("copy");
  document.body.removeChild(aux);
}
</script>
user_16530460
Related