Question

我试图在我的php文件中使用JavaScript函数从表中的特定单元格复制数据。每行都有一列“项目”，“描述”和指向项目的链接。

我希望能够通过单击按钮将链接复制到剪贴板。但是，无论我单击以复制链接的哪一行，它都只会复制最后一个。

我的Javascript函数仅接受表中显示的最后一个ID变量，而不接受我要复制的变量的ID ...

        while ($row = $result->fetch_assoc()) {
        $id = $row['id'];
                echo '<tr align="center">
                        <td>'.$row["pid"].':<br>'.$row["pname"].'</td>
                        <td>' .$row["URLdescription"].'</td>
                        <td>
                                <input type="text" value="'.$row['directionsURL'].'" id="'.$id.'">
                                <button onclick="myFunction()" name="copy"> Copy </button>
                        </td>
                     </tr>';
    };   //  END WHILE

^^这是我的while循环

    <script>
        function myFunction() {
          var copyText = document.getElementById("<?php echo $id; ?>")
          copyText.select();
          document.execCommand("copy");
          alert("Copied the text: " + copyText.value);
        }
</script>

^^这是我的JavaScript函数。

Answer 1

首先，您可以稍微清理一下循环：

while ($row = $result->fetch_assoc()) {
   extract($row);
   echo "<tr align='center'>
       <td>$pid:<br>$pname</td>
       <td>$URLdescription</td>
       <td>
           <input type='text' value='$directionsURL'>
           <button class='copy'> Copy </button>
       </td>
   </tr>";
};   //  END WHILE

通过将字符串用双引号"括起来，可以在其中使用变量。我们可以通过在行数组上调用extract()来获得那些。

接下来，我们将点击处理程序分配给按钮：

// get all buttons, turn NodeList into Array
const buttons = Array.prototype.slice.call(document.querySelectorAll(".copy"));

// click handler
const handleCopyClick = evt => {
  // grab the <input> via button's parent <td>
  var input = evt.target.parentNode.querySelector('input');
  input.select();
  document.execCommand("copy");
  input.blur(); // remove selection
};

// finally, assign the function as handler for each button
buttons.forEach(button => {
  button.addEventListener('click', handleCopyClick);
});

最后，如果这些<input>仅是<input>，因为您需要剪贴板功能，则应该使用隐藏的输入，并使用<span>显示URL。 / p>

Answer 2

html

<input type="text" value="
<?php echo $row['account']; ?>" id="
<?php echo "myInput".$id ;?>"> 
            
<button class = "abc btn-sm btn-success" data-id1="
    <?php echo "myInput".$id ;?>">
            Copy
            
</button>

JS

  $(document).on('click', '.abc', function(){  
    var id = $(this).data("id1");
            
    var copyText = document.getElementById(id);

    /* Select the text field */
    copyText.select();
    copyText.setSelectionRange(0, 99999); /*For mobile devices*/

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

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

});

从表中的特定数据单元格将文本复制到剪贴板。

2 个答案: