Move/Copy Specific columns data of a table in to another table Using Jquery

Question

Hello I have table filled with data generated from backend.Now I want to copy some Specific column data(tableX) to another new table(tableY) as input text on button click Like the picture below.

The Problem is I don't know how to specifically copy the specific columns into my new table . That's why I added an Image.

I know clone/append can copy whole table and move in to another .But I don't want To copy The whole table data.

I need to copy only specific columns data into another new table like the image.Straightly I want to fill table Y with some column from table X.

many error in your code : var row = $('tableX) .closest('tr').html(); — asdf_enel_hak
– asdf_enel_hak, Commented Jul 19, 2017 at 11:48
i didnt upload the whole code as i said i dont wanna clone or copy the whole table i want like the picture — Asifuzzaman
– Asifuzzaman, Commented Jul 19, 2017 at 11:49
I said I can't make what i wanted .That's why i added an Image of what I want@Zapurdead — Asifuzzaman
– Asifuzzaman, Commented Jul 19, 2017 at 11:58
First of all you have to use the data attributes of HTML to distinguish these columens from each the other then you have to loop through these columens and get the text or inner html and paste it to table two — Osama
– Osama, Commented Jul 19, 2017 at 12:04

Shiladitya · Accepted Answer · 2017-07-19 12:19:21Z

1

Here you go with the solution https://jsfiddle.net/2bqf0obs/1/

$('input[type="submit"]').click(function(){
	var col = parseInt($('#cNum').val());
 
 if( $('table#tableX thead tr').children().length >= col){
    if( $('table#tableY thead').children().length === 0 ){
      $('table#tableY thead').append('<tr></tr>');
    }

    $('table#tableY thead tr').append('<th>' + 	$($('table#tableX thead tr').children()[col -1]).text() + '</th>');

    $('table#tableX tbody tr').each(function(i){
     if( $('table#tableY tbody').children().length != $('table#tableX tbody').children().length ){
        $('table#tableY tbody').append('<tr></tr>');
     }
      $('table#tableY tbody tr:nth-child(' + (i + 1) + ')').append('<td>' + $($(this).children()[col - 1]).text() + '</tr>');
    });
  }
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableX">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10</td>
      <td>3</td>
      <td>17</td>
    </tr>
    <tr>
      <td>1</td>
      <td>31</td>
      <td>173</td>
    </tr>
    <tr>
      <td>20</td>
      <td>333</td>
      <td>18</td>
    </tr>
  </tbody>
</table>

<br/>

Col Number<input type="text" id="cNum" />
<input type="submit" value="Submit" />
<br/>
<table id="tableY">
  <thead></thead>
  <tbody>
    
  </tbody>
</table>

edited Jul 19, 2017 at 12:19

answered Jul 19, 2017 at 12:13

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Shiladitya Over a year ago

@AsifuzzamanRedoy... Question was related to specific column. Anyway give me some time, will do it for you.

Asifuzzaman Over a year ago

Thank you but you don't understand .I don't have any option to input column no in any text box .In on click i have to load the columns so I have to pass the column no inside the code i want that .I hope you understand

Shiladitya Over a year ago

@AsifuzzamanRedoy that also we can help you out... Wait for some time..

Asifuzzaman Over a year ago

Thanks a lot a lot a lot for helping , Let me clear again I know which columns will I Take just need to copy those into new and all at a time .on a single click@Shailaditya

Shiladitya Over a year ago

Here you go with the solution jsfiddle.net/2bqf0obs/3 . .. I have kept both the options. 1st option : click on header it will copy the entire column in new table & 2nd option using input textbox & button.

|

N.Malloul · Accepted Answer · 2017-07-19 12:15:18Z

You must loop on the first table thead and tbody and select the column of the header and body you want to add in the second table with eq(index).text().

And finnaly you create dynamicaly create the second table.

There is a code who works.

$("#table1").find("thead").each(function(){
	$table1Head=$(this).find("th");
	$("#table2 thead").append("<th>"+$table1Head.eq(1).text()+ " </th>");
  $("#table2 thead").append("<th>"+$table1Head.eq(2).text()+ " </th>");
  $("#table2 thead").append("<th>"+$table1Head.eq(4).text()+ " </th>");
  $("#table2 thead").append("<th>"+$table1Head.eq(5).text()+ " </th>");
});

$("#table1 tbody").find("tr").each(function(){
	$table2data=$(this).find("td");
	$("#table2 tbody").append("<tr>"+
  	"<td>" + $table2data.eq(1).text() + "</td>" +
    "<td>" + $table2data.eq(2).text() + "</td>" +
    "<td>" + $table2data.eq(4).text() + "</td>" +
    "<td>" + $table2data.eq(5).text() + "</td>" +
  "</tr>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
table 1
</p>
<table id="table1">
  <thead>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
    <th>E</th>
    <th>F</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>

<p>
table 2
</p>
<table id="table2">
<thead>
  
</thead>
<tbody>
  
</tbody>
</table>

Collectives™ on Stack Overflow

Move/Copy Specific columns data of a table in to another table Using Jquery

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related