Javascript复制到剪贴板功能仅复制第一行

Question

我是 JavaScript 的初学者，我不知道如何解决这个问题。我在 MySQL 中基于我的数据库创建了一个表。现在我想用复制按钮复制它的一个单元格。但我的函数只复制第一个单元格。我知道我必须给我的文本不同的 ID，但我不知道如何。 这是我的代码：

             <tr>
                <td class="ttd">&nbsp;</td>
                <td class="ttd"><?php echo htmlentities($f['ID']); ?> </td>
                <td class="ttd"><?php echo htmlentities($f['Invoice_number']); ?> </td>
                <td class="ttd"><?php echo htmlentities($f['Invoice_date']); ?> </td>
                <td class="ttd"><?php echo htmlentities($f['Month']); ?> </td>
                <td class="ttd"><?php echo htmlentities($f['Space_name']); ?> </td>
                <td class="ttd"><?php echo htmlentities($f['Company_name']); ?> </td>
                <td class="ttd"><?php echo htmlentities($f['Amount']); ?> </td>
                <div class="tooltip">
                <td class="ttd">
                    <input type="text" style="display:none;" id="Key" value="hhhhhhh.php?token=<?php echo $current_token['token']; ?>">
                    <button onclick="myFunction()" >Copy</button>


                    <script>
                    document.forms[0].addEventListener("submit", function(event){
                            if ( send == 0 ) { event.preventDefault(); }
                            });
    
                    function myFunction() {
                    var hidden = document.getElementById("Key");
                    hidden.style.display = 'block';
                    hidden.select();
                    hidden.setSelectionRange(0, 99999)
                    document.execCommand("copy");
                    alert("Copied the text: " + hidden.value);
                    hidden.style.display = 'none';
                    }
                    </script>
                </td>
                </div>
            </tr>
      

Answer 1

首先，您需要从输入文本中删除 id 属性（“key”），因为文档上不应有重复的 id。

然后您可以更改您的 js，将输入（“key”）元素按其兄弟元素传递给当前单击的按钮。

 function myFunction(el) {
  var hidden = el.previousElementSibling;
  hidden.style.display = 'block';
  hidden.select();
  hidden.setSelectionRange(0, 99999)
  document.execCommand("copy");
  alert("Copied the text: " + hidden.value);
  hidden.style.display = 'none';
}

 <table>
  <tr>
    <td class="ttd">&nbsp;</td>
    <td class="ttd">1</td>
    <td class="ttd">2</td>
    <td class="ttd">3</td>
    <td class="ttd">4</td>
    <td class="ttd">5</td>
    <td class="ttd">6</td>
    <td class="ttd">7</td>
    <td class="ttd">
      <input type="text" style="display:none;" value="12321">
      <button onclick="myFunction(this)" >Copy</button>
    </td>
  </tr>
  <tr>
    <td class="ttd">&nbsp;</td>
    <td class="ttd">1</td>
    <td class="ttd">2</td>
    <td class="ttd">3</td>
    <td class="ttd">4</td>
    <td class="ttd">5</td>
    <td class="ttd">6</td>
    <td class="ttd">7</td>
    <td class="ttd">
      <input type="text" style="display:none;" value="2222">
      <button onclick="myFunction(this)" >Copy</button>
    </td>
  </tr>
</table>

Answer 2

问题是您一遍又一遍地使用相同的 id。文档中的 ID 必须是单数的。因此，要么您必须为每个输入提供唯一的 id 和唯一的函数名称，要么更改代码以根据按钮查找它并使其可重用。

您需要引用它旁边的元素。您可以使用兄弟姐妹，也可以查看 td 并找到元素。

使用事件委托，因此您不会向文档添加一堆点击处理程序。

const tbody = document.querySelector("#myTable tbody");
tbody.addEventListener("click", function (event) {

  // get clicked button
  const btnCopy = event.target.closest(".copy");
  if (btnCopy) {
    copyThis(btnCopy);
  }

});

function copyThis(button) {
  const hiddenInput1 = button.previousElementSibling;
  console.log(hiddenInput1.value);
  
  const hiddenInput2 = button.closest("td").querySelector('input[type="hidden"]');
  console.log(hiddenInput2.value);
  
}

<table id="myTable">
  <tbody>
    <tr>
      <td>
        <input type="hidden" value="1">
        <button type="button" class="copy">Copy</button>
      </td>
    </tr>
      <td>
        <input type="hidden" value="2">
        <button type="button" class="copy">Copy</button>
      </td>
    </tr>
  </tbody>
</table>

如果你真的想使用内联事件

function copyThis(button) {
  const hiddenInput1 = button.previousElementSibling;
  console.log(hiddenInput1.value);
  
  const hiddenInput2 = button.closest("td").querySelector('input[type="hidden"]');
  console.log(hiddenInput2.value);
  
}

<table id="myTable">
  <tbody>
    <tr>
      <td>
        <input type="hidden" value="1">
        <button type="button" class="copy" onclick="copyThis(this)">Copy</button>
      </td>
    </tr>
      <td>
        <input type="hidden" value="2">
        <button type="button" class="copy" onclick="copyThis(this)">Copy</button>
      </td>
    </tr>
  </tbody>
</table>