javascript - 隐藏列时的html colspan问题

Question

我有一个 tablesorter 表，它有两套 2 组标题，每个主标题都有 5 个子标题。目标是只显示 3 列并正确地允许用户根据主要标题进行排序。

在这五个子标题中，第 4 列和第 5 列将始终可见，但对于前 3 列，我只想显示用户选择的一列，并隐藏其他两列。 Ulitmately head 主要标题将只显示 3 列。

当用户选择要显示的数据时，列标题会出现问题。

如果我将主要标题设置为 colspan 5，那么下一组中的列会溢出到第一组中，因为外观不正确

当我将主要标题的 colspan 设置为 3 时，显然它看起来很完美，但是当我尝试根据主要标题进行排序时，子标题与其主要标题不匹配并且排序已关闭。

这是一个 fiddle http://fiddle.jshell.net/hed56hsd/1/

我错过了什么？什么是有效的解决方法

Answer 1

由于每组只有三列可见，最简单的解决方案是将主标题上的 colspan 设置为 3。就是这样。

<th colspan='3' class="set1">Set 1</th>
<th colspan='3' class="set2">Set 2</th>
<th colspan='3' class="set3">Set 3</th>

初始化时，您可以通过在事件监听器的末尾添加 .change() 来应用数据选择器 - demo .

$('table').tablesorter({
  theme: 'blue'
});

$(".selector").on("change", function() {
  var selectedData = this.value;
  $(".type1").addClass("hide");
  $('.' + selectedData).removeClass("hide");
}).change();

如果比这更复杂，我会建议您试试 columnSelector widget它会自动修改 colspan 以防止表格格式困惑。