1

我有一个创建 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)到您的表中。

4

2 回答 2

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;}
于 2012-10-14T22:20:09.587 回答
-1

如果您想学习，jQuery 是您的最佳选择。这是一个很棒的 javascript 框架，随着您对 javascript 的熟悉，它会让您的生活变得更加轻松。jQuery 具有执行您所说的功能的功能。查看上的文档toggle()。

你会做这样的事情：

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

这将“切换”您单击的任何 TD 的可见性。 这是一个小提琴。

于 2012-10-14T22:23:23.767 回答