使用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.

Answer 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> 

Answer 2

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>