gpt4 book ai didi

javascript - jQuery DataTable 多行表头

转载 作者:太空宇宙 更新时间:2023-11-04 06:18:02 32 4
gpt4 key购买 nike

我使用 jQuery DataTable 来显示一些数据。

这是我的 code .

我尝试使用引导折叠功能添加折叠/展开。

所以我做了两行。

但是如果您看到控制台,它会抛出一个 javascript 错误,所以它下面的代码不会运行。

我该如何解决这个问题?

这是html代码:

<table id="taskTable">
<thead class="bg-light text-capitalize">
<tr>
<th>Subject</th>
<th>Name</th>
<th>Duration</th>
<th>User</th>
</tr>
<tr style="display:none;">
<th></th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#demo1">
<td>Subject1</td>
<td>Name1</td>
<td>Duration1</td>
<td>User1</td>
</tr>
<tr id="demo1">
<td>aaa</td>
</tr>
<tr data-toggle="collapse" data-target="#demo2">
<td>Subject2</td>
<td>Name2</td>
<td>Duration2</td>
<td>User2</td>
</tr>
<tr id="demo2">
<td>aaa</td>
</tr>
</tbody>
</table>

最佳答案

使用这种方法感觉不太好:因为搜索、排序等都会打破<tr>的概念作为标题,它是下一个 <tr>作为内容。

也许您可以使用不同的方法实现相同的目的,例如您可以拥有子行 like here .但您也可以通过以下方式解决上述问题:

JS Fiddle

HTML

<table id="taskTable">
<thead class="bg-light text-capitalize">
<tr>
<th>Subject</th>
<th>Name</th>
<th>Duration</th>
<th>User</th>
</tr>
<tr style="display:none;">
<th colspan="4"></th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#demo1">
<td>Subject1</td>
<td>Name1</td>
<td>Duration1</td>
<td>User1</td>
</tr>
<tr id="demo1">
<td colspan="4">aaa</td>
<td style="display: none;"></td>
<td style="display: none;"></td>
<td style="display: none;"></td>
</tr>
<tr data-toggle="collapse" data-target="#demo2">
<td>Subject2</td>
<td>Name2</td>
<td>Duration2</td>
<td>User2</td>
</tr>
<tr id="demo2">
<td colspan="4">aa2</td>
<td style="display: none;"></td>
<td style="display: none;"></td>
<td style="display: none;"></td>
</tr>
</tbody>
</table>

JS

$("#taskTable").dataTable({
"ordering": false
});

关于javascript - jQuery DataTable 多行表头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55763879/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com