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>

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>

• javascript
• jquery
• html-table
• jquery-selectors

Share Improve this question Follow edited Nov 15, 2017 at 14:24 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Oct 26, 2011 at 3:10 JamesJames 7,5431010 gold badges5050 silver badges8585 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

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.