Hiding columns in table JavaScript

You could use children and check their tagName to make sure they're td's. Something like this:

function show_hide_column(col_no, do_show) {
    var tbl = document.getElementById('id_of_table');
    var rows = tbl.getElementsByTagName('tr');

    for (var row = 0; row < rows.length; row++) {
        var cols = rows[row].children;
        if (col_no >= 0 && col_no < cols.length) {
            var cell = cols[col_no];
            if (cell.tagName == 'TD') cell.style.display = do_show ? 'block' : 'none';
        }
    }
}

Edit: Here's a working example: http://jsfiddle.net/3DjhL/2/.

Edit: In fact, I've just remembered the rows and cols properties, which make it even simpler. See http://jsfiddle.net/3DjhL/4/ to see it in action.

function show_hide_column(col_no, do_show) {
    var rows = document.getElementById('id_of_table').rows;

    for (var row = 0; row < rows.length; row++) {
        var cols = rows[row].cells;
        if (col_no >= 0 && col_no < cols.length) {
            cols[col_no].style.display = do_show ? '' : 'none';
        }
    }
}

Oh, and if you think the column numbers should start at 1 (which they don't), you'll have to offset that somewhere. For example at the top of show_hide_column():

col_no = col_no - 1;

If you can leverage the col tag the solution, in pure JavaScript, is straightforward:

<table id='id_of_table' border=1>
  <col class="col1"/>
  <col class="col2"/>
  <col class="col3"/>
  <col class="col4"/>
  <tr><td colspan="4"><table><tr><td></td></tr></table></td></tr>
  <tr><td>  2</td><td>   two</td><td>   deux</td><td>     zwei</td></tr>
  <tr><td>  3</td><td> three</td><td>  trois</td><td>     drei</td></tr>
  <tr><td>  4</td><td>  four</td><td>quattre</td><td>     vier</td></tr>
  <tr><td>  5</td><td>  five</td><td>   cinq</td><td>fÜnf</td></tr>
  <tr><td>  6</td><td>   six</td><td>    six</td><td>    sechs</td></tr>
</table>

You can apply to col just a couple of CSS attributes, but visibility is one of them:

function show_hide_column(col_no, do_show) {
   var tbl = document.getElementById('id_of_table');
   var col = tbl.getElementsByTagName('col')[col_no];
   if (col) {
     col.style.visibility=do_show?"":"collapse";
   }
}

References:

• col
• visibility on quirksmode