在数据表中折叠表头会破坏我的表格式

Collapsing a Table header in a DataTable is breaking my table format

本文关键字：我的 表格 格式 数据表 折叠 表头      更新时间：2023-09-26

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

有4个子头名为事件1..4每个子标题旁边是3行数据

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

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

我希望看到每个事件折叠成event，其中3行显示分数。

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

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

提琴项目下面

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

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

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

由于某种原因，这将鼠标指针更改为第一个子行的指针(手)，尽管click函数仅在标题上运行。为了解决这个问题，使用CSS将所有TD元素上的鼠标光标设置为default:

td {
    cursor: default;
}
相关文章：