jquery скрыть столбец таблицы, nth-child низкая производительность?

Question

У меня довольно большая HTML-таблица, и я динамически добавляю новые строки, используя jtemplates. При добавлении строки мне нужно показать / скрыть столбец на основе флага bool. Этот код $('#tableid td:nth-child(3)').hide(); выполняет задание, но я вижу, как столбец появляется на долю секунды (и таблица выглядит шаткой), прежде чем он исчезает. Как мне сделать это быстрее?

Я пытался использовать $('#tableid td:eq(2)').hide();, но он скрывает только столбец первой строки. Есть ли способ, которым я могу ускорить его, чтобы скрыть / показать гладко?

Answer 1

Попробуйте указать ячейки столбца, необходимые для переключения определенного класса ...

<table id="tableid">
    <tr>
       <td>...</td> <td>...</td> <td class="toggle">...</td> <td>...</td>
    </tr>
    <tr>
       <td>...</td> <td>...</td> <td class="toggle">...</td> <td>...</td>
    </tr>
    <tr>
       <td>...</td> <td>...</td> <td class="toggle">...</td> <td>...</td>
    </tr>
</table>

..., а затем позаботьтесь о том, чтобы скрыть его в своем CSS ...

#tableid.hide_col td.toggle {
    display:none;
}

Итак, теперь единственный необходимый JavaScript-код должен был бы добавить класс в таблицу.

$('#tableid').addClass('hide_col')

Это позволяет браузеру позаботиться о скрытии / отображении с минимальными накладными расходами JavaScript.