Блог

Главная - Вопросы по программированию - Копирование содержимого одного столбца в другой в jQuery

Копирование содержимого одного столбца в другой в jQuery

#javascript #jquery #html-table #jquery-selectors

#javascript #jquery #html-таблица #jquery-селекторы

Вопрос:

Следующий jQuery выполняется очень медленно (~ 7 секунд). Я явно делаю это неправильно!

Я пытаюсь скопировать содержимое столбца col в столбец 0 в HTML-таблице, поэтому, если col равно 2, мне нужно скопировать столбец 2 в столбец 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>

Ответ №1:

Вам не нужно выделять каждую ячейку таблицы по отдельности. Вы можете выбрать исходный столбец и столбцы назначения и перебирать их:

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

Комментарии:

1. Упс, источник и цель поменялись местами изначально. Исправлено.

2. Классные компоненты. Это работает, если я меняю slice на eq . Из интереса, почему мой исходный код был таким медленным?

3. О, я пропустил 2-й параметр для slice() . Исправлено.

4. Ваш исходный код выбирал каждую исходную и целевую ячейки по отдельности, что означало гораздо больший обход DOM для jQuery.

Ответ №2:

Другой вариант. Не уверен, какой из них будет работать быстрее. Я просто удалил первый столбец, поскольку он должен был быть заменен, а затем добавил выбранный столбец:

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

Проверьте это: здесь .

Метки: