CODEWITHSUNDEEP
javascriptjqueryhtml-table
ervin_b
ervin_b

Reputation: 57

How to copy content of an html table row from one table to another using jquery

Here is my code for the First table:

<table class="table table-condensed table-striped table-hover" id="schedules">
    <thead>
        <th>Schedule Code</th>
        <th>Subject Description</th>
        <th>Room</th>
        <th>Day</th>
        <th>Time</th>
    </thead>
    <tbody>
       <tr>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <button> Copy </button>
       </tr>
       <tr>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <button> Copy </button>
       </tr>
       <tr>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <button> Copy </button>
       </tr>
       <tr>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <button> Copy </button>
       </tr>
    </tbody>
</table>

Second Table:

<table class="table table-condensed table-striped table-hover" id="my_schedules">
    <thead>
        <th>Schedule Code</th>
        <th>Subject Description</th>
        <th>Room</th>
        <th>Day</th>
        <th>Time</th>
    </thead>

</table>

My jQuery code:

<script type="text/javascript">

$(document).ready(function(){


    var rows = $("#schedules"),
        copyTable = $('#my_schedules');

    rows.click(function(){
            var row = $(this),
                cloneRow = row.clone();
            copyTable.append(cloneRow);
            row.prevAll().hide();
    });
}); 


</script>

It copies the whole content of the first table to the second table. What I want is if I clicked the copy button the specific row only would be copied to the second table.

Upvotes: 0

Views: 2661

Answers (4)

Chintan Thummar
Chintan Thummar

Reputation: 1552

I have made changes to some of above structure.

$(document).ready(function(){
 var rows = $("#schedules"),
 copyTable = $('#my_schedules');
 /*
    rows.click(function(){
        var row = $(this),
        cloneRow = row.clone();
        copyTable.append(cloneRow);
        row.prevAll().hide();
    });  
 */
 $('button').click(function(){
     var buttonClass = $(this).attr("class");
     var row = $("#"+buttonClass).clone();
     $('#my_schedules').children('tbody').append(row);
 });
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed table-striped table-hover" id="schedules">
  <thead>
    <th>Schedule Code</th>
    <th>Subject Description</th>
    <th>Room</th>
    <th>Day</th>
    <th>Time</th>
  </thead>
  <tbody>
    <tr id="1">
      <td>*1*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <button class="1"> Copy </button>
    </tr>
    <tr id="2">
      <td>*2*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <button class="2"> Copy </button>
    </tr>
    <tr id="3">
      <td>*3*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <button class="3"> Copy </button>
    </tr>
    <tr id="4">
      <td>*4*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <button class="4"> Copy </button>
    </tr>
  </tbody>
</table>

<table class="table table-condensed table-striped table-hover" id="my_schedules">
  <thead>
    <th>Schedule Code</th>
    <th>Subject Description</th>
    <th>Room</th>
    <th>Day</th>
    <th>Time</th>
  </thead>
  <tbody>
  </tbody>
</table>

I hope it solved your issue.

Upvotes: 1

R4nc1d
R4nc1d

Reputation: 3113

Is this what you want, I created a fiddle for you.

I changed a couple of this, your button seems to be floating nowhere, so i added it in a td. Also added a class to the buttons for easy selecting.

$(document).ready(function() {
  $(".use-button").click(function() {
    var html = $(this).closest("tr")
              .clone().find('td:last')
              .remove().end().prop('outerHTML');

    var $schedules = $("#my_schedules")
    $schedules.append(html);
  });
});

EDIT If the main table is getting loaded dynamically and you need to click the button you'll have to create a "delegated" binding by using on().

 $('.use-button').on('click', function() {
    var html = $(this).closest("tr")
               .clone().find('td:last')
               .remove().end().prop('outerHTML');
    $("#my_schedules").append(html);
 });

Upvotes: 3

Vishal Surjuse
Vishal Surjuse

Reputation: 170

This will solve your problem. on particular rowclick row copied to second table. 

$(document).ready(function () {
        var rows = $("#schedules tr:not(:first)"),
            copyTable = $('#my_schedules');

        rows.click(function () {
            var row = $(this),
            cloneRow = row.clone();
            copyTable.append(cloneRow);
            row.hide();
        });
    });

Upvotes: 1

Gulmuhammad Akbari
Gulmuhammad Akbari

Reputation: 2036

Try this:

    $('#my_schedules').append(cloneRow);

Upvotes: 0

Related Questions