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

Question

您好，我有一个表，其中填充了后端生成的数据。现在我想将一些特定列数据(tableX)复制到另一个新表(tableY)作为按钮单击的输入文本，如下图所示。

问题是我不知道如何专门将特定列复制到我的新表中。这就是我添加图像的原因。

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

我需要仅将特定列数据复制到另一个新表(如图像)中。我想直接用表 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>