Question

I have a fairly large html table and I’m adding a new rows dynamically using jtemplates. When adding the row, I need to show/hide a column based on a bool flag. This code $('#tableid td:nth-child(3)').hide(); gets the job is done, but I can see the column appear for a split second (and the table appears wonky) before it disappears. How do I make it faster?

I tried using $('#tableid td:eq(2)').hide();, but it only hides the first row’s column. Is there a way I can speed it up so the hide/show is smooth?

Answer 1

Try giving the cells of the column that you need to toggle a specific class…

<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>

…then take care of hiding it in your CSS…

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

So now the only JavaScript needed would be to add the class to the table.

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

This lets the browser take care of hiding/showing with minimal JavaScript overhead.