【发布时间】:2014-03-05 01:07:45
【问题描述】:
我正在尝试让 jQuery Tablesorter 插件与嵌套表一起使用,其中内表和外表都是可排序的。外部表格的每一行通常包含一个按钮,单击该按钮时,会在其下方的行中显示一个隐藏的内部表格(尽管为简单起见,我在下面的 HTML 中跳过了该按钮,使所有内容最初都可见)。
内部表在一行中,具有“expand-child”类,这告诉 Tablesorter 在排序时将其与正上方的行保持一致。这主要是可行的,但是单击时外部表标题没有正确突出显示,并且内部表根本没有正确排序。
我知道this SO question,一种解决方案是禁用对内表的排序,但我特别希望外表和内表都是可排序的。
我的 HTML 在下面,我还创建了一个 jsfiddle 来显示问题。感谢您的帮助。
<table class="tablesorter">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
</tr>
</thead>
<tbody>
<tr>
<td>Honda</td>
<td>Accord</td>
</tr>
<tr class="expand-child">
<td colspan="2" style="padding: 0 30px 0 30px;">
<table class="tablesorter">
<thead>
<tr>
<th>Doors</th>
<th>Colors</th>
</tr>
</thead>
<tbody>
<tr>
<td>Honda 2-Door</td>
<td>Honda Red</td>
</tr>
<tr>
<td>Honda 4-Door</td>
<td>Honda Blue</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Toyota</td>
<td>Camry</td>
</tr>
<tr class="expand-child">
<td colspan="2" style="padding: 0 30px 0 30px;">
<table class="tablesorter">
<thead>
<tr>
<th>Doors</th>
<th>Colors</th>
</tr>
</thead>
<tbody>
<tr>
<td>Toyota 2-Door</td>
<td>Toyota Yellow</td>
</tr>
<tr>
<td>Toyota 4-Door</td>
<td>Toyota Green</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
【问题讨论】:
标签: jquery tablesorter