使用 Javascript 选择一个完整的表格（要复制到剪贴板）

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

提问by DanC

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.

我想知道是否有人知道如何使用 js 选择完整的表格，以便用户可以右键单击选择，将其复制到剪贴板，然后将其粘贴到 Excel 上。如果您手动选择表格，该过程将完美运行。但有时，如果表格高度比屏幕大几倍，拖动鼠标选择它会变得乏味。所以，我想让用户有可能点击“选择整个表格”按钮，一切都准备好被复制。

Any ideas?

有任何想法吗？

回答by Tim Down

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

是的。这不是太棘手，以下将适用于所有主流浏览器（包括 IE 6，实际上是 5）：

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

（在 Jukka Korpela 的评论指出之前的版本在 IE 9 标准模式下不起作用之后，于 2012 年 9 月 7 日更新）

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

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

回答by Daniel

Just to make the code proposed by Tim Down more complete, allowing de selected content to be automatically copied to clipboard:

只是为了让 Tim Down 提出的代码更完整，允许 de 选择的内容自动复制到剪贴板：

<script type="text/javascript">
    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>

<table id="tableId">
    <thead>
        <tr><th>Heading</th><th>Heading</th></tr>
    </thead>
    <tbody>
        <tr><td>cell</td><td>cell</td></tr>
    </tbody>
</table>

<input type="button" value="select table"
   onclick="selectElementContents( document.getElementById('tableId') );">

回答by Anders Tore Boye Lauridsen

I got it to work in IE9 finally by using the following script

我最终通过使用以下脚本在 IE9 中工作

NOTE: It doesn't work on html tables. It HAS to be a DIV. So just put a wrapper DIV around the table you need to select!

注意：它不适用于 html 表格。它必须是一个 DIV。因此，只需在您需要选择的桌子周围放置一个包装 DIV！

First I changed the HTML button code a bit:

首先，我稍微更改了 HTML 按钮代码：

<input type="button" value="Mark table"    onclick="SelectContent('table1');">  

Then changed the javascript to:

然后将javascript更改为：

function SelectContent (el) {


var elemToSelect = document.getElementById (el);

        if (window.getSelection) {  // all browsers, except IE before version 9
            var selection = window.getSelection ();
            var rangeToSelect = document.createRange ();
            rangeToSelect.selectNodeContents (elemToSelect);

            selection.removeAllRanges ();
            selection.addRange (rangeToSelect);



        }

    else       // Internet Explorer before version 9
          if (document.body.createTextRange) {    // Internet Explorer
                var rangeToSelect = document.body.createTextRange ();
                rangeToSelect.moveToElementText (elemToSelect);
                rangeToSelect.select ();

        }

  else if (document.createRange && window.getSelection) {         
          range = document.createRange();             
          range.selectNodeContents(el);             
    sel = window.getSelection();     
                  sel.removeAllRanges();             
    sel.addRange(range);              
 }  
}

回答by Mark Parrish

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 中，使用 innerHTML 抓取它并将其复制到剪贴板。我没有在所有浏览器上测试过它，但它适用于 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>