CODEWITHSUNDEEP
javascriptjqueryhtml-tablejquery-selectors
James
James

Reputation: 7543

Copy the contents of one column to another in jQuery

The following jQuery is extremely slow (~7 sec). I'm clearly doing it the wrong way!

I'm trying to copy the contents of column col to column 0 in an HTML table so if col is 2, then I need to copy column 2 to column 0. 

for (var i=0;i<31;i++)
  $('.grid tr:nth-child(' + i + ') td:first-child').text(
    $('.grid tr:nth-child(' + i + ') td:nth-child(' + col + ')').text()
   );

HTML:

<table>
  <tr><td>A</td><td>D</td><td>G</td></tr>
  <tr><td>B</td><td>E</td><td>H</td></tr>
  <tr><td>C</td><td>F</td><td>I</td></tr>
  <!-- etc. -->
</table>

Upvotes: 5

Views: 5650

Answers (2)

bozdoz
bozdoz

Reputation: 12870

Another option. Not sure which would run faster. I simply removed the first column, since it was going to be replaced, then prepended the column of choice:

col = 2;
$('.grid td:first-child').remove();
$('.grid td:nth-child('+(--col)+')').each(function(){
    $(this).parent('tr').prepend('<td>'+$(this).text()+'</td>');
});

Check it out: here.

Upvotes: 1

Annabelle
Annabelle

Reputation: 10716

You don't need to select each table cell individually. You can select the source column and destination columns and iterate over them:

// Get the target column table cells.  This will select the first cell from
// each row in the table.
var target = $('.grid tr td:first-child');

// Iterate over each cell in the source column and copy its text to the
// corresponding cell in the target column.
$('.grid tr td:nth-child(' + (col + 1) + ')').each(function (rowIndex) {
    target.slice(rowIndex, rowIndex + 1).text($(this).text());
});

Upvotes: 3

Related Questions