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

Question

我想知道是否有人知道如何使用js选择完整的表格,以便用户可以右键单击选择,将其复制到剪贴板,然后将其粘贴到Excel.如果您手动选择表格,则该过程可以完美地运行.但有时候,如果桌面高度比屏幕大几倍,选择它拖动鼠标会变得乏味.所以,我想让用户可以点击"选择整个表格"按钮,所有内容都可以复制.

有任何想法吗？

Answer 1

是.这并不是太棘手,以下内容适用于所有主流浏览器(包括IE 6,实际上是5):

(在Jukka Korpela的评论指出前一版本在IE 9标准模式下不起作用后,2012年9月7日更新)

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

Answer 2

只是为了使Tim Down提出的代码更加完整,允许将所选内容自动复制到剪贴板:

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

Answer 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);              
 }  
}