how to clone/copy html table using javascript/jquery

Question

I have a problem here, that when I click the copy button on the recently copied row. It doesnt work. You guys know how to fix this?

This is my code

var controller = function(num1) {
    $('#copy-' + num1).click(function() {

      var $tableBody = $('#table_name').find("tbody"),
        $trLast = $tableBody.find("#tr-" + num1),
        $trNew = $trLast.clone();
      // $trNew.find('input').val('');
      $trLast.after($trNew);
      console.clear()
      // refresh_index();

    });
  }

  function refresh_index() {
    $('#table_name > tbody > tr').each(function(i) {

      i++;
      var select = $(this).find('select');
      var text = $(this).find('input');
      var button = $(this).find('button');

      controller(i);

    });
  }
  refresh_index();

This is my code in JSFIDDLE

Mamun · Answer 1 · 2019-01-30T05:59:06.273

To attach the click event on dynamically created element use the delegation approach using .on(). This will allow the event to work on the elements those are added in the body at a later time.

Change

$('#copy-' + num1).click(function() {

To

$('body').on('click','#copy-'+num1, function() {

$(function(){

 var controller = function(num1){
    $('body').on('click','#copy-'+num1, function() {

      var $tableBody = $('#table_name').find("tbody"),
          $trLast = $tableBody.find("#tr-"+num1),
          $trNew = $trLast.clone();
          // $trNew.find('input').val('');
          $trLast.after($trNew);
          console.clear()
          // refresh_index();

    });
  }
  
  function refresh_index(){
   $('#table_name > tbody > tr').each(function (i) {

      i++;
      var select = $(this).find('select');
      var text = $(this).find('input');
      var button = $(this).find('button');

      controller(i);

    });
  }
  refresh_index();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_name">
  <thead>
    <tr>
      <th>No</th>
      <th>Item</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr class="trs" id="tr-1">
      <td>1</td>
      <td>Mouse</td>
      <td><button class="copy" id="copy-1">Copy</button></td>
    </tr>
    <tr class="trs" id="tr-2">
      <td>2</td>
      <td>Keyboard</td>
      <td><button class="copy" id="copy-2">Copy</button></td>
    </tr>
    <tr class="trs" id="tr-3">
      <td>3</td>
      <td>Monitor</td>
      <td><button class="copy" id="copy-3">Copy</button></td>
    </tr>
  </tbody>
</table>

score 0 · Answer 2 · answered Jan 30 '19 at 05:56

You are adding it after the dom is loaded so it will not find it. If you use the on function to target something that was in the dom before it was dynamically added then add the target in the second variable after "click" then it should work.

$(function(){

 var controller = function(num1){
  
    var newThingy = '#copy-' +  num1;
    
    $("#table_name").on("click", newThingy, function() {

      var $tableBody = $('#table_name').find("tbody"),
          $trLast = $tableBody.find("#tr-"+num1),
          $trNew = $trLast.clone();
          // $trNew.find('input').val('');
          $trLast.after($trNew);
          console.clear()
          // refresh_index();

    });
  }
  
  function refresh_index(){
   $('#table_name > tbody > tr').each(function (i) {

      i++;
      var select = $(this).find('select');
      var text = $(this).find('input');
      var button = $(this).find('button');

      controller(i);

    });
  }
  refresh_index();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table id="table_name">
  <thead>
    <tr>
      <th>No</th>
      <th>Item</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr class="trs" id="tr-1">
      <td>1</td>
      <td>Mouse</td>
      <td><button class="copy" id="copy-1">Copy</button></td>
    </tr>
    <tr class="trs" id="tr-2">
      <td>2</td>
      <td>Keyboard</td>
      <td><button class="copy" id="copy-2">Copy</button></td>
    </tr>
    <tr class="trs" id="tr-3">
      <td>3</td>
      <td>Monitor</td>
      <td><button class="copy" id="copy-3">Copy</button></td>
    </tr>
  </tbody>
</table>

Kiran Shahi · Answer 3 · 2019-01-30T06:20:29.060

Use delegate event like $tableBody.find('.copy').off('click').on('click',function(){}); and bind click event after cloning the tr better to use class instead of ids. Here is the updated code based on your jsfiddle.

var $tableBody = $('#table_name').find("tbody");
clickEvent();
function clickEvent(){
  $tableBody.find('.copy').off('click').on('click',function() {
          $trLast = $(this).closest('tr'),
          $trNew = $trLast.clone();
          $trLast.after($trNew); 
          clickEvent();
  });
   function refresh_index(){
   $('#table_name > tbody > tr').each(function (i) {
      i++;
      var select = $(this).find('td').eq(0).text(i);
    });
  }
  refresh_index();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_name">
  <thead>
    <tr>
      <th>No</th>
      <th>Item</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr class="trs" id="tr-1">
      <td>1</td>
      <td>Mouse</td>
      <td><button class="copy" id="copy-1">Copy</button></td>
    </tr>
    <tr class="trs" id="tr-2">
      <td>2</td>
      <td>Keyboard</td>
      <td><button class="copy" id="copy-2">Copy</button></td>
    </tr>
    <tr class="trs" id="tr-3">
      <td>3</td>
      <td>Monitor</td>
      <td><button class="copy" id="copy-3">Copy</button></td>
    </tr>
  </tbody>
</table>

how to clone/copy html table using javascript/jquery

3 Answers3