web-dev-qa-db-ja.com

JavaScriptを使用して完全なテーブルを選択します（クリップボードにコピーします）

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

何か案は？

javascriptselecthighlight
59
DanC

はい。それほどトリッキーではなく、すべての主流のブラウザーで次のように動作します（IE 6、および実際には5）：

（前のバージョンがIE 9標準モード）で動作しなかったと指摘したJukka Korpelaのコメントの後、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') );">
96
Tim Down

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

私は最終的に次のスクリプトを使用して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);              
 }  
}
7
Anders Tore Boye Lauridsen

これが私が使用したものです。また、コピーコマンドを作成するため、配置するドキュメントで貼り付けコマンドを使用するだけです。基本的に、コピーしたいコンテンツを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>
0
Mark Parrish