CODEWITHSUNDEEP
javascripthtmljquery
Mohamed Elsobky
Mohamed Elsobky

Reputation: 71

How can I copy table td using jQuery

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?

Upvotes: 1

Views: 1805

Answers (2)

CodeBug
CodeBug

Reputation: 1667

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>

Upvotes: 0

Always Helping
Always Helping

Reputation: 14570

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>

Upvotes: 2

Related Questions