入力タグなしでテーブルセルをクリップボードにコピー - Javascriptとhtml

Question

テーブルセルをクリックすることができ、クリップボードにデータをコピーすることができます。セルも赤く点滅し、コピーされたことを知らせます。これはうまく動作しますが、各セルに入力タグがあることに気づくでしょう（同様の例は入力や他のフォームタグも使用しています）。セルのデータは変更されないため、入力が不要です。入力タグなしでこれを行う方法はありますか？通常の表のセルのデータはinnerHTMLでしょうか？onclickをコピーできますか？いいえjQueryしてください。

function myFunction(itemid) { 
 
    var copyText = document.getElementById(itemid); 
 
    copyText.select(); 
 
    document.execCommand("Copy"); 
 
    // blink red 
 
    document.getElementById(itemid).style.backgroundColor="#FF0000"; 
 
    setTimeout(function(){document.getElementById(itemid).style.backgroundColor="#FFFFFF";},300); 
 
}

::selection {background:none;} 
 
input {outline:0;cursor:pointer}

<table> 
 
<td><input type="text" value="Cheese" id="cell1" onclick="myFunction('cell1')"></td> 
 
<td><input type="text" value="Crackers" id="cell2" onclick="myFunction('cell2')"></td><tr> 
 

 
<td><input type="text" value="Milk" id="cell3" onclick="myFunction('cell3')"></td> 
 
<td><input type="text" value="Bread" id="cell4" onclick="myFunction('cell4')"></td> 
 
</table>

Answer 1

アニメーションが

あなた次第

 let table = document.getElementById('tableId'); 

    table.addEventListener('click', (e) => { 
     let target = e.target; 
     if(target.localName === 'td') { 
      let range = document.createRange(); 
      range.selectNodeContents(target); 
      let sel= document.getSelection(); 
      sel.removeAllRanges(); 
      sel.addRange(range); 

      document.execCommand('copy'); 
      sel.removeAllRanges(); 
      target.classList.add('copy-animate'); 
      setTimeout(() => { 
       target.classList.remove('copy-animate'); 
      }, 200); 
     } 
    });