用于切换表格单元格的可见性的Javascript [英] Javascript for toggling visibility of table cell

问题描述

我有一个代码可以创建html报告。

I have a code which creates html reports.

它使用html表来显示结果，表格是可排序的，它们是斑马线自动条纹的，所以那里已经是Javascript并且它全部嵌入内联，因此该文件可以简单地与其用户共享。

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.

我没有很好地掌握Javascript，并且这样做已经很难了。然而，现在的问题是有时一些单元格中包含大量数据。然而，它是设计的，我希望找到一个优雅的解决方案。

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.

我想要的是一个Javascript函数或函数套件，我可以按下我表中的任何单元格都可以切换可见性。

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.

我找到了在表外实现按钮以隐藏整个行或列的解决方案。带有输入字段的按钮可以定义ID并使其隐藏该ID。我认为对每个单元格使用不同的唯一ID是不明智的。我想要更简单的东西。

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.

一个全局函数，可以捕获正常的单元格上的任何onclick事件单元格内容切换可见性。

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.

编辑：

这是我最后编写的最终代码。似乎工作得很好：

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"
    }
}

然后只需将 onclick = tableclick（event）添加到您的表中。

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

推荐答案

将 onclick 事件附加到表中，并查看事件的目标。

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.
    }
}

旁注：您不需要JavaScript斑马条纹行。只需使用CSS：

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

这篇关于用于切换表格单元格的可见性的Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！