テーブルの特定の列データを別のテーブルに移動するJqueryを使用する

Question

こんにちは私は、バックエンドから生成されたデータでテーブルを埋めました。次に、特定の列データ（tableX）を別の新しいテーブル（tableY）に入力としてコピーしたいボタンクリック時のテキスト下の図のように

問題特定の列を新しいテーブルにコピーする方法がわかりません。だから私は画像を追加しました。

は、私はテーブル全体のデータをコピーするにはしたくないクローン/ APPENDは、テーブル全体をコピーして別の.Butに移動することができます知っています。私はテーブルXから、いくつかの列に

Answer 1

をテーブルYを埋めたいimage.Straightlyのような別の新しいテーブルにのみ特定の列のデータをコピーする必要があり

ここでは、ソリューションhttps://jsfiddle.net/2bqf0obs/1/

で行きます

$('input[type="submit"]').click(function(){ 
 
\t 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>' + \t $($('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にループがなければならず、ヘッダの列を選択して2番目のテーブルに追加するボディーをeq(index).text()とします。

あなたはダイナミクスを作成し、2番目のテーブルを作成します。

動作するコードがあります。あなたのコード内

$("#table1").find("thead").each(function(){ 
 
\t $table1Head=$(this).find("th"); 
 
\t $("#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(){ 
 
\t $table2data=$(this).find("td"); 
 
\t $("#table2 tbody").append("<tr>"+ 
 
    \t "<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>