用 Javascript 选择一个完整的表(要复制到剪贴板)

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

有什么想法吗？

84703 次浏览
小开
最佳答案

是的，这并不太复杂，下面的代码可以在所有的主流浏览器中使用(包括 IE6，甚至是5) :

(更新于2012年9月7日，在 Jukka Korpela 的评论指出之前的版本不能在 IE9标准模式下工作之后)

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

小开

我使用下面的脚本最终使它在 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);
}
}
小开

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

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

提交答案