簡単にコピーするにはクリック時のTDの値を選択してください

Question

私はtdのinnerHTMLをonclickするので、ユーザーはCtrl + Cキーを押してコンテンツをコピーできます。

私は多くの組み合わせを試みましたが、私は方法を見つけることができません。しかし、それは何も影響しませんフォーカスを追加する簡単なdocument.getElementById(id).select();

を入力上で動作するように継ぎ目、および.selectは（）を送信し、エラー：私はtd要素で行うことができますどのように

document.getElementById(...).select is not a function

？ IE上で動作していないかどうか気にしません。

または可能であれば、テキストを直接コピーします。

Answer 1

またコピーことは困難ではありません。私はこの機能を使用しています。これは他のブラウザーでも機能します。IE（起源不明）だけではありません。

https://jsfiddle.net/5bhkydq1/

HTMLコード

<div> 
Click me to copy! 
</div> 

ジャバスクリプトとjQuery

$('div').click(function(){ 
      copyTextToClipboard($(this).html()); 
}); 

function copyTextToClipboard(text) { 
    var textArea = document.createElement("textarea"); 

    // Place in top-left corner of screen regardless of scroll position. 
    textArea.style.position = 'fixed'; 
    textArea.style.top = 0; 
    textArea.style.left = 0; 

    // Ensure it has a small width and height. Setting to 1px/1em 
    // doesn't work as this gives a negative w/h on some browsers. 
    textArea.style.width = '2em'; 
    textArea.style.height = '2em'; 

    // We don't need padding, reducing the size if it does flash render. 
    textArea.style.padding = 0; 

    // Clean up any borders. 
    textArea.style.border = 'none'; 
    textArea.style.outline = 'none'; 
    textArea.style.boxShadow = 'none'; 

    // Avoid flash of white box if rendered for any reason. 
    textArea.style.background = 'transparent'; 


    textArea.value = text; 

    document.body.appendChild(textArea); 

    textArea.select(); 

    try { 
    var successful = document.execCommand('copy'); 
    var msg = successful ? 'successful' : 'unsuccessful'; 
    console.log('Copying text command was ' + msg); 
    } catch (err) { 
    console.log('Oops, unable to copy'); 
    } 

    document.body.removeChild(textArea); 
} 

Answer 2

クリックするとtdのテキストを選択できます。

$("td").click(function(){ 
 
    var range = document.createRange(); 
 
    range.selectNodeContents(this); 
 
    var sel = window.getSelection(); 
 
    sel.removeAllRanges(); 
 
    sel.addRange(range); 
 
});

table, tr, td { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td>Column1</td> 
 
     <td>Column2</td> 
 
     <td>Column3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Column1</td> 
 
     <td>Column2</td> 
 
     <td>Column3</td> 
 
    </tr> 
 
</table>