用于切换表格单元格可见性的Javascript

我有一个创建html报告的代码

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

我对Javascript掌握得不太好，而且做这件事已经够难了。然而，现在的问题是，有时某些单元格中包含大量数据。然而，这是出于设计，我希望找到一个优雅的解决方案

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

换句话说，有一个包含许多单元格、行和列的表。当用户按下一个单元格时，其内容是不可见的，因此表的其余部分将自行调整大小。因此，一个包含多行内容的单元格会重新调整行高，其大小将崩溃

在这种方法中，由于大单元格是不可见的，因此可以更容易地比较具有加高单元格的多行数据

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

一个全局函数，用于捕获单元格上的任何onclick事件，从而使该单元格内容切换可见性

我知道我已经多次重复我的愿望，但希望这能让我的愿望更加清晰

编辑：

这是我最后的代码。看起来效果不错：

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=table单击（事件）

添加到表中。

将

onclick

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

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：

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

---

如果您希望学习，jQuery是一条路要走。这是一个很棒的javascript框架，当您更加熟悉javascript时，它将使您的生活更加轻松。jQuery的功能正好满足您的要求。查看打开的

切换（）

您可以这样做：

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

---

这将“切换”您单击的任何TD的可见性。我不想包括外部库，因为所有的代码都需要嵌入到文档中。jQuery不是学习的方法。一旦您学会了，这可能是一种方法，但是如果您想对未来的进展有任何希望，就不应该从jQuery开始。如果jQuery突然消失会发生什么，嗯？我必须承认，我是通过第一次试验和使用jQuery学习（就我所知）JavaScript的。然后，在试图理解jQuery如何工作时，几乎是偶然地了解了DOM API。并不是说我会推荐这种方法，但它也有它的优点。看起来不错，我应该把它放在代码表的什么地方呢。目标是什么类型的，elementID？无论在哪里，只要确保定义了

table

，并指向该表即可

target

是一个HTMLTableDataCellElement`-换句话说，是对表单元格本身的引用。No

getElementByID

会给你一个元素，

target

已经是一个元素了。我想我把

表放错地方了。我把它放在脚本部分。就这样。当然，我的表是一个简单的表，我是否遗漏了什么？您是否定义了
表
？您需要使用
getElementById
或
getElementsByTagName
将表放入其中。