Javascript 隐藏列时的html colspan问题

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

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

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

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

当我将主标题colspan设置为3时，看起来很完美，但是当我尝试基于主标题进行排序时，子标题与主标题不匹配，排序被关闭

这是一把小提琴

---

我错过了什么？一个有效的解决办法是什么？因为每个集合只有三列可见，最简单的解决方案是将主标题上的

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>

如果比这更复杂的话，我会建议您尝试使用自动修改

colspan

以避免表格格式混乱的

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

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