Javascript for toggling visibility of table cell

问题:

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.

回答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;}

回答2:

If you are looking to learn, jQuery is the way to go. It's a great javascript framework that will make your life much easier as you get more familiar with javascript. jQuery has functionality to do just what you are saying. Check out the docs on toggle().

You would do something like this:

$('td').click(function() {
    $('td').show();
    $(this).toggle();
});

This would 'toggle' the visibility of any TD that you click. Here is a fiddle.