使用Jquery将表中的特定列数据移动/复制到另一个表中

Question

您好，我的表中填充了从后端生成的数据。现在，我想将一些特定列数据（tableX）复制到另一个新表（tableY），作为按钮上的输入文本，单击下面的图片。

问题是我不知道如何将特定的列专门复制到新表中。 这就是为什么我添加一个Image 。

我知道克隆/追加可以复制整个表并移到另一个表。但是我不想复制整个表的数据。

我只需要将特定的列数据复制到另一个新表（如图像）中，就想用表X中的某些列填充表Y.

Answer 1

在这里，您可以使用解决方案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

您必须在第一个表thead和tbody上循环，并使用eq(index).text()选择要在第二个表中添加的标题和主体的列。

最后创建动态创建第二个表。

有一个有效的代码。

 $("#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>