我可以只使用一个标签 'tr' 来制作一张像这张图片一样的 table 吗？

Question

我排序 table 以使用 libray "tablesorter js" 但如果我像上图那样使用 2 个或更多 'tr'，该库将无法工作。所以我只需要写 'tr'

可以制作吗？

Answer 1

您将需要两个 tr 来创建您想要的 table 结构。

原始的 table 排序器，包括一个 cssChildRow 选项，默认设置为 "expand-child"。 It isn't documented, but you can see a demo here。这是 a 演示它是如何工作的，但如您所见，您无法对第二列进行排序。

HTML

<tr>
  <td colspan="2">Lamp</td>
</tr>
<tr class="expand-child">
  <td>Burn Time</td>
  <td>150 Hours</td>
</tr>

脚本

$(function() {
  $('table').tablesorter({
    cssChildRow: "expand-child"
  });
});

在我的 fork of tablesorter, you can still set the cssChildRow option, but the default was changed to "tablesorter-childRow". It automatically processes the extra column in the child row with no change necessary to the HTML or script - demo.

我可以只使用一个标签 'tr' 来制作一张像这张图片一样的 table 吗？

Can I make a table like this picture using only one tag 'tr'?

html

tablesorter