Question

I have a code which creates html reports.

It uses html tables to display the results, the tables are sortable, and they are zebra striped automatically, so there is already Javascript and its all embedded inline, so that the file can be simply shared with its users.

I don’t have a great grasp of Javascript, and doing that already was hard enough. However, a problem now is that sometimes some of the cells have A LOT of data in them. It is by design however, and I am hoping to find an elegant solution to this.

What I would like is a Javascript function or suite of functions where I can press on any cell in my table and have it toggle visibility.

In other words – there is a table with many cells rows and columns. When the user presses one cell, its contents are invisible, so the rest of the table will re-size itself. Thus – a cell with many lines of content which re-sizes the rows height, will collapse in size.

In this method, many rows of data which have a cell which heightens it can be compared much easier since the large cell is invisible.

I have found solutions which implement buttons outside the table to hide entire rows or columns. Buttons with input fields you can define an ID and have it hide that ID. I do not think it smart to have a different unique ID to each cell, I want something simpler.

A global function that catches any onclick event on a cell which well make that cells contents toggle visibility.

I know I have repeated my desire multiple times, but hopefully this has made my desire more clear.

Edit:

This is the final code I went for in the end. Seems to work nicely:

function tableclick(e) 
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    while(target != this && (!target.tagName || target.tagName != "TD")) target = target.parentNode;
    if( target != this) 
    {
        toggleVis(target)
    }
}

function toggleVis(obj) 
{
    if ( obj.style.fontSize != "0px" ) 
    {
        obj.style.fontSize = "0px"
    }
    else 
    {
       obj.style.fontSize = "16px"
    }
}

and then simply add onclick=tableclick(event) to your table.

Answer 1

Attach an onclick event to the table, and look at the event’s target.

table.onclick = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    while(target != this && (!target.tagName || target.tagName != "TD")) target = target.parentNode;
    if( target != this) {
        // "target" is the cell that was clicked. Do something with it.
    }
}

Side-note: You don’t need JavaScript to zebra-stripe the rows. Just use CSS:

tr {background-color:white}
tr:nth-child(even) {background-color:black;}