How can I copy table td using jQuery

Question

i have a table i need if i click on any cell copy it to clipboard using jquery or javascript i tried to put the same id to every td and if i click to this element copy it but i cant do it

<table id="myTable">
                        <thead>
                            <tr class="table100-head">
                                <th class="column1">id</th>
                                <th class="column2">user</th>
                                <th class="column3">pass</th>
                            </tr>
                        </thead>
                        <tbody>
                                <tr>
                                <td id="copyte" class="column1">1</td>
                                <td id="copyte" class="column2">admino</td>
                                <td id="copyte" class="column3">123456</td>
                                </tr>
                                <tr>
                                <td id="copyte" class="column1">2</td>
                                <td id="copyte" class="column2">aa</td>
                                <td id="copyte" class="column3">123456</td>
                                </tr> 
                                <tr>
                                <td id="copyte" class="column1">3</td>
                                <td id="copyte" class="column2">bb</td>
                                <td id="copyte" class="column3">123456</td>
                                </tr>                               
                        </tbody>
</table>

jquery

$(document).ready(function() {
    $('[id^="copyte"]').click(function(e) {  
      alert(1);
    });
});

Is there a better idea or solution?

Putting the same `id` on every element is not only invalid but achieves nothing. You can simply use `$('td').click()` and use `$(this).text()` inside the handler to get the text. — , Sep 17 '20 at 12:05
Id NEEDS to be unique. You CAN NOT have two elements with same id... — ikiK, Sep 17 '20 at 12:16
Once you've fixed the id issue, then you can easily read the `text()` of the clicked cell, and use this technique to copy it to the clipboard on the device: https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript — Rory McCrossan, Sep 17 '20 at 12:24

score 2 · Accepted Answer · answered Sep 17 '20 at 12:25

You need to use class selector for your td to copy their text on click. Id's must be unique for each element on the page.

To get all the elements you can use $.each method and then apply an event listener on them a click function and and you can use $(this).text() to get the clicked td's text only.

We need to create an empty input so that we can use that input that copying our text and once the text is copied you we will remove input from the page.

Live Working Demo:

$(document).ready(function() {
  $('.copyte').each(function(index, element) {
    $(element).click(function() {
      var clickedTdText = $(this).text() //get the clicked text
      var temp = $("<input>"); //create temp  input
      $("body").append(temp); //append temp input
      temp.val(clickedTdText).select(); //select text
      document.execCommand("copy");
      temp.remove(); //remove temp inout
      alert('Copied Successfully: ' + clickedTdText)
    })
  })
});

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  cursor: pointer
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
  <thead>
    <tr class="table100-head">
      <th class="column1">id</th>
      <th class="column2">user</th>
      <th class="column3">pass</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="column1 copyte">1</td>
      <td class="column2 copyte">admino</td>
      <td class="column3 copyte">123456</td>
    </tr>
    <tr>
      <td class="column1 copyte">2</td>
      <td class="column2 copyte">aa</td>
      <td class="column3 copyte">1234</td>
    </tr>
    <tr>
      <td class="column1 copyte">3</td>
      <td class="column2 copyte">bb</td>
      <td class="column3 copyte">123</td>
    </tr>
  </tbody>
</table>

score 0 · Answer 2 · answered Sep 17 '20 at 12:25

well, as per your title you need to copy the content of the table on click, okay try my below snippet it's working a charm,

note:

you can't use the same id for more than 1 element in HTML so I changed your id="copyte" to the class =copyte.

$(document).ready(function() {
    $('.copyte').click(function(e) {
      var $temp = $("<input>");
      $("body").append($temp);
      $temp.val($(this).html()).select();
      document.execCommand("copy");
      $temp.remove();
      alert($(this).html() + ' copied')
    });
});

<table id="myTable">
  <thead>
    <tr class="table100-head">
      <th class="column1">id</th>
      <th class="column2">user</th>
      <th class="column3">pass</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="column1">1</td>
      <td class="column2 copyte">admino</td>
      <td class="column3 copyte">123456</td>
    </tr>
    <tr>
      <td class="column1 copyte">2</td>
      <td class="column2 copyte">aa</td>
      <td class="column3 copyte">123456</td>
    </tr>
    <tr>
      <td class="column1 copyte">3</td>
      <td class="column2 copyte">bb</td>
      <td class="column3 copyte">123456</td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

check the method of calling the function ;-), you had used each, I just added a click event — CodeBug, Sep 17 '20 at 12:31

How can I copy table td using jQuery

2 Answers2