Javascript: hide table column ondblclick

Question

I have a table and I want to hide a column when I double click a column.

Code for hiding a column is practically all around SO. All I need is a hint on how/where to add the ondblclick event so I can retreive the identity of a <td> within a <table> .

Answer 1

You can do this way:

<td ondblclick="this.style.display = 'none';">Some Stuff</td>

Here this refers to current td clicked.

Working Example

To go unobtrusive, you can do that easily using jQuery if you want:

$('#tableID td').dblclick(function(){
  $(this).hide();
});

Answer 2

Here are two solutions that should work. One done with jQuery and one with only standard Javascript.

http://jsfiddle.net/GNFN2/2/

// Iterate over each table, row and cell, and bind a click handler
// to each one, keeping track of which column each table cell was in.
var tables = document.getElementsByTagName('table');
for (var i = 0; i < tables.length; i++) {
    var rows = tables[i].getElementsByTagName('tr');
    for (var j = 0; j < rows.length; j++) {
        var cells = rows[j].getElementsByTagName('td');
        for (var k = 0; k < cells.length; k++) {
            // Bind our handler, capturing the list of rows and colum.
            cells[k].ondblclick = column_hide_handler(rows, k);
        }
    }
}

// Get a click handler function, keeping track of all rows and
// the column that this function should hide.
function column_hide_handler(rows, col) {
    return function(e) {
        // When the handler is triggered, hide the given column
        // in each of the rows that were found previously.
        for (var i = 0; i < rows.length; i++) {
            var cells = rows[i].getElementsByTagName('td');

            if (cells[col]) {
                cells[col].style.display = 'none';
            }
        }
    }
}

With jQuery it is much cleaner. This method also uses event bubbling, so you don't need to bind an event handler to each table cell individually.

http://jsfiddle.net/YCKZv/4/

// Bind a general click handler to the table that will trigger
// for all table cells that are clicked on.
$('table').on('dblclick', 'td', function() {
    // Find the row that was clicked.
    var col = $(this).closest('tr').children('td').index(this);
    if (col !== -1) {
        // Go through each row of the table and hide the clicked column.
        $(this).closest('table').find('tr').each(function() {
            $(this).find('td').eq(col).hide(); 
        });
    }
});

Answer 3

Due to lack of answears I came up with a workaround, which is a big ugly, but it works fine.

On the window load event I decided to iterate the table and set each 's onclick event to call my show_hide_column function with the column parameter set from the iteration.

window.onload = function () {
  var headers = document.getElementsByTagName('th');
  for (index in headers) {
    headers[index].onclick = function (e) {
      show_hide_column(index, false)
    }
  }
}

show_hide_column is a function that can be easily googled and the code is here:

function show_hide_column(col_no, do_show) { 
  var stl; 
  if (do_show) stl = 'table-cell' 
  else stl = 'none';

  var tbl  = document.getElementById('table_id');
  var rows = tbl.getElementsByTagName('tr');
  var headers = tbl.getElementsByTagName('th');

  headers[col_no].style.display=stl;

  for (var row=1; row<rows.length; row++) {
    var cels = rows[row].getElementsByTagName('td')
    cels[col_no].style.display=stl;
  }
}

Note: my html only had one table so the code also assumes this. If you have more table you should tinker with it a little. Also it assumes the table has table headers ();

Also I noted this to be an ugly approach as I was expecting to be able to extract the index of a table cell from the table without having to iterate it on load.