0

我有一个功能，通过单击包含在 < thead> 标记中的表头来隐藏/显示表。单击时表格隐藏，只剩下标题，再次单击可以取消隐藏表格。

我有多个表，并且只想使用函数，而不是为每个表编写一个。为此，我试图传递参数（this，this.lastSibling）。由于某种原因this.lastSibling没有针对任何对象。我已经尝试了所有我能想到的导航节点树的方法，但我无法定位 tbody。

我的 Javascript/Jquery

function ToggleTable(trigger,target){
    $(trigger).click(function(){
      $(target).toggle();
      ToggleTable(trigger,target)
    });
}

我的 HTML

<table class="format2" >
    <thead onmouseover="ToggleTable(this,this.lastSibling)">
        <!--Title-->
    </thead>
    <tbody>
        <!--Cells with information in here-->
    </tbody>
    <!--Note No TFooter Tag-->
</table>

<--Other tables similar to the one above-->

提前致谢！

4

3 回答 3

0

假设您所有的表都将具有类 format2 。试试这个：

$("table.format2 > thead").click(function(){
    $(this).next("tbody").toggle();
});

JSFiddle：http: //jsfiddle.net/KcY4X/

于 2012-07-09T18:57:51.670 回答
0

我有一个通过单击包含在<thead>标签中的标题来隐藏/显示表格的功能。单击时表格隐藏，只剩下标题，再次单击可以取消隐藏表格。

我迷失在你当前的代码中。但是如果你想切换 tbody 的可见性（或<table>标签中的最后一个子元素，你可以试试这个。

function ready() {

  $('table > thead')
    .each(function(e){
      $(this).siblings(':last').hide();
    })
    .click(function(e) {
      $(this).siblings(':last').toggle();
    });

}

$(ready);

现场样本：http ://bl.ocks.org/3078240

于 2012-07-09T19:25:12.900 回答
0

如果您想尝试使用核心 JavaScript 而不是 jQuery 垫片的解决方案，这可能对您有用。这是我快速编写的一个函数，它返回作为 HTML 元素的最后一个兄弟元素（例如，不是文本节点），尽管您应该能够轻松修改它以接受 DOM 中的任何节点：

function getLastSibling(el) {
    var siblings, x, sib;

    siblings = el.parentNode.children;
    x = siblings.length;

    while ((sib = siblings[x - 1]) && x >= 0) {
        console.log(sib);
        console.log(sib.nodeType);
        if (sib.nodeType != 1 || sib.tagName == 'SCRIPT') {
            x--;
        } else {
            return sib;
        }
    }

    return null;
}
于 2012-07-09T19:25:14.047 回答