选择表格并将其复制到剪贴板
我想选择没有标题的表格,它可以工作,但我无法将其复制到剪贴板。
这是页面:http://tuudik.lohv.eu/Asjad/EURXML/
这里是代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>ECB kursid seisuga: 2011-04-01 </title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
</style>
<script type="text/javascript">
function selectElementContents(el) {
var body = document.body, range, sel;
if (body.createTextRange) {
range = body.createTextRange();
range.moveToElementText(el);
range.select();
range.execCommand('Copy');
} else if (document.createRange && window.getSelection) {
range = document.createRange();
range.selectNodeContents(el);
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
sel.execCommand('Copy');
}
}
</script>
</head>
<body>
<table cellpadding="2">
<thead>
<tr>
<th>Valuuta</th>
<th>Kurss</th>
</tr>
</thead>
<tbody id="currencies">
<tr><td>USD</td><td>1,4141</td></tr><tr><td>JPY</td><td>118,56</td></tr><tr><td>DKK</td><td>7,4564</td></tr><tr><td>GBP</td><td>0,88150</td></tr><tr><td>NOK</td><td>7,8055</td></tr><tr><td>RUB</td><td>40,1500</td></tr><tr><td>CAD</td><td>1,3686</td></tr></tbody>
</table>
<input type="button" value="select table"
onclick="selectElementContents( document.getElementById('currencies') );">
</body>
</html>
I want to select table without headers, and it works, but I cannot get it so, that it would copy to clipboard.
Here's the page: http://tuudik.lohv.eu/Asjad/EURXML/
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>ECB kursid seisuga: 2011-04-01 </title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
</style>
<script type="text/javascript">
function selectElementContents(el) {
var body = document.body, range, sel;
if (body.createTextRange) {
range = body.createTextRange();
range.moveToElementText(el);
range.select();
range.execCommand('Copy');
} else if (document.createRange && window.getSelection) {
range = document.createRange();
range.selectNodeContents(el);
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
sel.execCommand('Copy');
}
}
</script>
</head>
<body>
<table cellpadding="2">
<thead>
<tr>
<th>Valuuta</th>
<th>Kurss</th>
</tr>
</thead>
<tbody id="currencies">
<tr><td>USD</td><td>1,4141</td></tr><tr><td>JPY</td><td>118,56</td></tr><tr><td>DKK</td><td>7,4564</td></tr><tr><td>GBP</td><td>0,88150</td></tr><tr><td>NOK</td><td>7,8055</td></tr><tr><td>RUB</td><td>40,1500</td></tr><tr><td>CAD</td><td>1,3686</td></tr></tbody>
</table>
<input type="button" value="select table"
onclick="selectElementContents( document.getElementById('currencies') );">
</body>
</html>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这对我在 IE8 上有效:
This works for me on IE8:
在大多数浏览器中,无法复制到系统剪贴板。为此,您需要使用 hack。最常见的方法是使用Flash。 ZeroClipboard 可以做到这一点,并且看起来效果很好。
顺便说一句,
execCommand()
是document
和TextRange
对象的方法,而不是Selection
对象,所以< code>sel.execCommand("Copy") 不可能工作。更新
我从未真正使用过 ZeroClipboard。看过文档后,它看起来并没有达到我所希望的效果(似乎无法复制富文本),而且比我想象的更可怕。您可以使用 ZeroClipboard 通过
innerHTML
将表格内容复制为文本,但这是否可以接受取决于您希望用户可以对复制的内容执行什么操作。In most browsers it isn't possible to copy to the system clipboard. To do this you need to use a hack. The most common way is to use Flash. ZeroClipboard does this and appears to work quite well.
By the way,
execCommand()
is a method ofdocument
andTextRange
objects, notSelection
objects, sosel.execCommand("Copy")
couldn't possibly work.UPDATE
I've never actually used ZeroClipboard. Having looked at the docs, it doesn't look like it does what I had hoped (there seems to be no way to copy rich text) and is even more of a gruesome hack than I thought. You could copy the table's content as text via
innerHTML
using ZeroClipboard, but whether this is acceptable or not depends on what you're hoping the user can do with the copied content.