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

【问题标题】：Select a complete table with Javascript (to be copied to clipboard)使用 Javascript 选择一个完整的表（要复制到剪贴板）
【发布时间】：2011-01-03 21:59:09
【问题描述】：

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

有什么想法吗？

【问题讨论】：

标签： javascript select highlight

【解决方案1】：

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

（2012 年 9 月 7 日更新，在 Jukka Korpela 的评论指出以前的版本不能在 IE 9 标准模式下工作）

演示：http://jsfiddle.net/timdown/hGkGp/749/

代码：

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

【讨论】：

在 IE 9 上，这在“标准模式”下不起作用。控制台显示有关无法完成操作的错误消息，错误代码为 800a025e，与行 range.select(); 相关。在 Quirks 模式下，以及当浏览器模式设置为 IE 8 时，它也可以工作。
@JukkaK.Korpela 有趣，谢谢。我已经用解决方法更新了我的答案。
很好的解决方案。再添加一个提示，如果像我一样，您希望在不导致重绘的情况下发生这种情况：1. 让 selectElementComments 返回 false（即添加 return false; 作为 selectElementComments 的最后一行。2. 使用 onclick="return selectElementContents(.....)
谢谢你，请复制剪贴板
确定它选择了表格，但是如何自动将其复制到剪贴板？用户仍然必须按 ctrl-c 或复制粘贴并不理想。

【解决方案2】：

只是为了让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') );">

【讨论】：

【解决方案3】：

我终于通过使用以下脚本让它在 IE9 中工作

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

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

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

然后将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);              
 }  
}

【讨论】：

当我指向一个封装
所以 onclick="SelectContent('dv');" .........

数据

【解决方案4】：

这是我用过的。它还制作了复制命令，因此您所要做的就是在要将其放入的文档中使用粘贴命令。基本上，您将要复制的内容包装在一个 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>

【讨论】：