Быстрый выбор столбцов таблицы с помощью jQuery

Question

У нас есть большая таблица HTML (может быть, 100x100 ячеек).Выбор строк довольно быстрый, так как мы можем просто выбрать все TD в определенном TR.Но выбор столбцов с помощью jQuery и nth-child намного медленнее.Есть ли более быстрые альтернативы для выбора столбца?Как насчет псевдоклассов для каждого столбца (например, class = "column-1" и т. Д.)?Каков ваш опыт с этим?

Answer 1

Есть ли более быстрые альтернативы для выбора столбца?

Я бы рекомендовал использовать игнорируемые теги COLGROUP / COL в соответствии с исходной спецификацией W3C HTML. Скопируйте и вставьте этот код в пустую HTML-страницу и убедитесь сами в волшебстве COLGROUP!

<table id="mytable">
  <caption>Legend</caption>
  <colgroup>
    <col style="background-color: #f00;"/>
    <col/>
    <col/>
  </colgroup>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>cell 1,1</td>
      <td>cell 1,2</td>
      <td>cell 1,3</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>footer 1,1</td>
      <td>footer 1,2</td>
      <td>footer 1,3</td>
    </tr>
  </tbody>
</table> 

Теги TFOOT идут до Теги TBODY. COLGROUPs имеют COL для каждого столбца.

Преимущество этого состоит в том, что стилизация для COL внутри COLGROUP будет каскадно ко всем столбцам в таблице. Цвета фона, например. Меня не перестает удивлять то, что многие люди не имеют ни малейшего представления об этом трюке, хотя спецификация HTML доступна для чтения и усвоения любым человеком.

Answer 2

Вы пытались использовать DOM напрямую?

var column = new Array();
var cells;

for (row = 0; row < table.rows.length; row++) {
  tr = table.rows[row];
  column.push(tr.cells[1]);
};

Answer 3

Это работает довольно быстро для меня на http://www.jsfiddle.net/gaby/GWqtB/4/ ( для 100cols x 300rows )

Можете ли вы привести пример, чтобы мы могли видеть скорость вашей реализации?
Может быть, задержка в какой-то другой части кода? нравится стиль при выборе ..

Answer 4

Я бы лично использовал класс для каждого столбца.Мой обычный стандарт таков:

<tr class="row row-1">
<td class="col col-1"></td>
<td class="col col-2"></td>
<td class="col col-3"></td>
</tr>