Скопируйте текст каждой ячейки td в буфер обмена с помощью кнопки

#javascript #jquery

Вопрос:

Я пытаюсь установить кнопку для каждого текста td в таблице, которая будет копировать содержимое в ваш буфер обмена.

Я хочу выбрать содержимое узла каждого текста, используя ключевое слово this в jquery. Когда я передаю объект jQuery, он выдает ошибку.

Он работал, когда я передавал уникальный идентификатор, но когда я передавал объект jQuery, он не работал. Как я могу добиться этого эффективно?

 $(document).ready( function() {
   $('input[data-target]').on("click", function(){
      var docSelector = document.createRange();      
      var get_text = $(this);
      console.log(get_text);
      console.log(docSelector.selectNodeContents(get_text));
     
      var selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(docSelector);

      document.execCommand("copy");
      selection.removeAllRanges();
      
   });   
});

 table, th, td{
  border: 1px solid #000;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <table>
    <thead>
     <tr>
       <th>Copy</th>
       <th>Text</th>
     </tr>     
     <tr>
       <td> <input type="button" data-target='copy' value="X"></td>
       <td id='copy'> Copy some text </td>
     </tr>
     <tr>
       <td> <input type="button" data-target='copy1' value="X"></td>
       <td id='copy1'> Copy some more text </td>
     </tr>
     <tr>
       <td> <input type="button" data-target='copy2' value="X"></td>
       <td id='copy2'> Copy some even more text </td>
     </tr>
    </thead>
  </table>
</html>

Развернуть фрагмент

1. можете ли вы попробовать это с помощью console.log(docSelector.selectNodeContents(get_text[0]));

2. Привет, спасибо за ответ! Я попробовал это и получил undefined. Сообщение об ошибке больше не отображается, но по-прежнему не работает

Ответ №1:

Вам нужно получить текст соседней ячейки:

 var get_text = $(this).closest('td').next()[0];

Фрагмент:

 $('input[data-target]').on("click", function(){
    var docSelector = document.createRange();
    var get_text = $(this).closest('td').next()[0];
    console.log(get_text);

    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(docSelector);

    document.execCommand("copy");
    selection.removeAllRanges();

});

 table, th, td{
    border: 1px solid #000;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
    <thead>
    <tr>
        <th>Copy</th>
        <th>Text</th>
    </tr>
    <tr>
        <td> <input type="button" data-target='copy' value="X"></td>
        <td id='copy'> Copy some text </td>
    </tr>
    <tr>
        <td> <input type="button" data-target='copy1' value="X"></td>
        <td id='copy1'> Copy some more text </td>
    </tr>
    <tr>
        <td> <input type="button" data-target='copy2' value="X"></td>
        <td id='copy2'> Copy some even more text </td>
    </tr>
    </thead>
</table>

Развернуть фрагмент

Ответ №2:

Использование data-target идентификатора

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

 $(document).ready(function() {
  $('input[data-target]').on("click", function() {
    var docSelector = document.createRange();
    var get_text = document.getElementById(this.dataset.target);
    docSelector.selectNodeContents(get_text)

    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(docSelector);

    document.execCommand("copy");
    selection.removeAllRanges();

  });
});

 table, th, td{
  border: 1px solid #000;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<table>
  <thead>
    <tr>
      <th>Copy</th>
      <th>Text</th>
    </tr>
    <tr>
      <td> <input type="button" data-target='copy' value="X"></td>
      <td id='copy'> Copy some text </td>
    </tr>
    <tr>
      <td> <input type="button" data-target='copy1' value="X"></td>
      <td id='copy1'> Copy some more text </td>
    </tr>
    <tr>
      <td> <input type="button" data-target='copy2' value="X"></td>
      <td id='copy2'> Copy some even more text </td>
    </tr>
  </thead>
</table>

</html>

Развернуть фрагмент