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

Question

你好我有一个表填充了从backend生成的数据。现在我想将一些特定的列数据（tableX）复制到另一个新表（tableY）作为按钮单击的输入文本如下图所示。

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

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

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

Answer 1

您可以使用解决方案https://jsfiddle.net/2bqf0obs/1/

＆＃13;

＆＃13;

$('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>');
    });
  }
});

＆＃13;

table, tr, th, td{
  border: 1px solid #000;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您必须在第一个表格thead和tbody上循环，然后在第二个表格中选择要添加eq(index).text()的标题和正文列。

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

有一个代码可以工作。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;