javascript - Javascript を使用して完全なテーブルを選択する (クリップボードにコピーする)

Question

ユーザーが選択を右クリックしてクリップボードにコピーし、Excelに貼り付けることができるように、jsを使用して完全なテーブルを選択する方法を誰かが知っているかどうか疑問に思っていました。テーブルを手動で選択すると、プロセスは完全に機能します。ただし、テーブルの高さが画面の数倍大きい場合、マウスをドラッグして選択するのが面倒になることがあります。そこで、ユーザーが「テーブル全体を選択」ボタンをクリックできるようにすると、すべてをコピーする準備が整います。

何か案は？

Answer 1

はい。それほどトリッキーではなく、以下はすべての主流のブラウザー (IE 6 を含む、実際には 5 を含む) で機能します。

(2012 年 9 月 7 日、以前のバージョンが IE 9 標準モードで動作しなかったことを指摘した Jukka Korpela のコメントの後に更新)

デモ: 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

次のスクリプトを使用して、最終的に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);              
 }  
}