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