Question

我正在尝试使用具有标题，子标题和3行的数据表。

有4个名为Event 1..4的子标题每个子标题旁边是3行数据

当我点击子标题时，子标题正在折叠，但子标题2中的行正在泄漏

你可以在下面的Fiddler中看到它发生，单击Event1，然后单击Event2，你会看到DataTable中断的格式。

我希望看到每个事件都进入事件，其中3行显示分数。

如何折叠子标题并保持格式正确。

$('.header').click(function () {
    var $this = $(this);
    $(this).nextUntil('tr.header').slideToggle(100).promise().done(function () {
        $this.find('span').text(function (_, value) {
            return value == '-' ? '+' : '-'
        });
    });
});

下面的Fiddler项目

http://jsfiddle.net/nc8bt9ss/873/

Answer 1

可以使用以下功能切换三个子行中的单元格：

$('th').click(function () {
   $(this).parent().next('tr').addBack().next('tr').addBack().children('td').slideToggle(200).promise();
});

由于某种原因，这会将鼠标光标更改为第一个子行的指针（手），尽管click函数仅在标题上运行。要解决该问题，请使用CSS将所有TD元素上的鼠标光标设置为默认值：

td {
    cursor: default;
}

折叠DataTable中的表头会破坏我的表格格式

1 个答案: