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

问题描述

我正在尝试从表格单元创建到剪贴板的副本。想法是，当用户将鼠标指针悬停在带有其名称的第一个表格列单元格上时，该按钮将显示出来，并且他可以将其复制。有什么方法可以创建悬停复制按钮而不在<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">

解决方法

我可以自己提供这样的解决方案。因为您没有特定要求，所以我将自行决定解决方案。

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">

,

您可以尝试使用此方法..也许会对您有所帮助。

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

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">