从表格单元格复制到剪贴板

Question

我正在尝试从表格单元格创建复制到剪贴板。这个想法是，当用户用他的名字将鼠标悬停在第一个表格列单元格上时，按钮将显示并且他可以复制它。有什么方法可以创建这个悬停复制按钮而不在<td> 标签中创建按钮。

function myFunction() {

  var copyText = document.getElementById("table-cell");

  /* Copy the text inside the text field */
  document.execCommand("copy");

  /* Alert the copied text */
  alert("Copied the text: " + copyText.value);
}

<table class="table">
  <thead>
    <tr>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="table-cell">Mark <button onclick="myFunction()">Copy text</button></td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>

      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Answer 1

你可以试试这个..也许它会帮助你..

通过悬停从表格单元格复制文本..

document.querySelectorAll(".table-cell").forEach(function(elm){
elm.addEventListener("mouseover", function(e){
 e.target.style.backgroundColor = 'red'; 
  var copyText = e.target.textContent; 
   const el = document.createElement('textarea');
  el.value = copyText;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);

 
  /* Alert the copied text */
  alert("Copied the text: " + el.value);
  
});

})

<table class="table">
  <thead>
    <tr>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="table-cell">Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td class="table-cell">Jacob </td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td class="table-cell">Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Answer 2

我自己可以提供这样的解决方案。由于您没有具体要求，因此我将自行决定解决方案。

function myFunction() {

  var copyText = document.getElementById("table-cell");

  /* Copy the text inside the text field */
  document.execCommand("copy");

  /* Alert the copied text */
  alert("Copied the text: " + copyText.value);
}

#table-cell {
  position: relative;
}

#table-cell p{
   display: none;
   position: absolute;
   font-size: 10px;
   margin: 0;
   top: 0;
   cursor: pointer;
   color: blue;
   transition: .3s;
}

.table tr:hover #table-cell p {
   display: block;
}

.table #table-cell p:hover {
   transform: scale(1.3);
}

<table class="table">
  <thead>
    <tr>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="table-cell">Mark <p onclick="myFunction()">Copy text</p></td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>

      <td id="table-cell">Jacob <p onclick="myFunction()">Copy text</p></td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td id="table-cell">Larry <p onclick="myFunction()">Copy text</p></td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">