CODEWITHSUNDEEP
javascriptjquery
Asifuzzaman
Asifuzzaman

Reputation: 1783

Move/Copy Specific columns data of a table in to another table Using Jquery

Hello I have table filled with data generated from backend.Now I want to copy some Specific column data(tableX) to another new table(tableY) as input text on button click Like the picture below. enter image description here

The Problem is I don't know how to specifically copy the specific columns into my new table . That's why I added an Image.

I know clone/append can copy whole table and move in to another .But I don't want To copy The whole table data.

I need to copy only specific columns data into another new table like the image.Straightly I want to fill table Y with some column from table X.

Upvotes: 0

Views: 3311

Answers (2)

Shiladitya
Shiladitya

Reputation: 12181

Here you go with the solution 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>

Upvotes: 1

N.Malloul
N.Malloul

Reputation: 223

You must loop on the first table thead and tbody and select the column of the header and body you want to add in the second table with eq(index).text().

And finnaly you create dynamicaly create the second table.

There is a code who works.

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

Upvotes: 1

Related Questions