Question

我有一个代码可以创建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=tableclick(event)添加到您的表格中。

Answer 1

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

Answer 2

如果你想学习，jQuery是要走的路。这是一个很棒的javascript框架，随着你越来越熟悉javascript，你的生活会变得更轻松。 jQuery具有完成您所说内容的功能。查看toggle()上的docs。

你会做这样的事情：

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

这将“切换”您点击的任何道明的可见性。 Here是一个小提琴。

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

2 个答案: