StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You want to use COLGROUP to do this, otherwise you have to apply a style to <em>every</em> cell on <em>every</em> row, which will be terribly inefficient and will likely hang the browser, especially if your grid is large. All of the aforementioned answers that rely on a third-party library (jQuery) are doing it the slow/lazy way. Since all Javascript runs on the client-side, you probably want to have a little more consideration when it comes to efficiency.</p> <p>Here ya go...</p> <pre><code>function hideColumns(tableId, colIndexArray) { var tbl = document.getElementById(tableId); if(!tbl) return; var rows = tbl.getElementsByTagName("TBODY"); if(rows.length == 0) rows = tbl.getElementsByTagName("TR"); else rows = rows[0].getElementsByTagName("TR"); var cols = rows[rows.length - 1].getElementsByTagName("TD"); var colgroup = document.createElement("COLGROUP"); for(var i = 0, l = cols.length; i < l; i++) { var col = document.createElement("COL"); for(var num in colIndexArray) { if(colIndexArray[num] == i) { if(document.all) col.style.display = 'none' else col.style.visibility = 'collapse'; break; } } colgroup.appendChild(col); } tbl.insertBefore(colgroup, tbl.childNodes[0]); } </code></pre> <p>Use it like this...</p> <pre><code>var columnsToHide = [0, 1, 2]; // hide the first 3 columns var tableId = "tableIdHere"; // view the source of your page to get this hideColumns(tableId, columnsToHide); </code></pre> <p>Tested in IE7 and FF3: <a href="http://blog.josh420.com/examples/HideTableColumns/" rel="nofollow noreferrer">Hide Table Columns Using Javascript</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload