jQuery:Hide |单击后显示5列（并将最后4列设置为100%宽度）

刚接触jQuery，已经好几年没有编程了。坦白地说，我对HTML和CSS还可以，但对脚本编写很糟糕

我试图找到一个脚本，它将折叠9列表的前5列，同时将最后4列拉伸到100%宽度。显示时显示“隐藏列”，隐藏时显示“显示列”的文本。当前5列折叠时，表的其余部分在页面上展开，当然，当通过单击“ShowColumns”再次取消隐藏隐藏列时，会恢复到原始状态

我发现很多脚本可以通过各种选择方式隐藏列，但我希望有一个单击解决方案来隐藏/显示前5列。我没有办法将其余的列拉伸到100%的宽度

有人能在这里帮忙吗

谢谢：） 肖恩

伊恩
时代
时期
纪元
文科硕士
人类后裔
区别/形态
示例（物种）
潜水员
超域新村
分支生命可分为以下分支：域细菌、超域新壁菌
域真核生物
超域新村分为以下分支：域古菌、域真核生物

根据问题中的HTML，您可以使用如下内容：

  $('.parent').each(function(){
      var i = 0;
      while(i < 5){
          $(this).find('td, th').eq(i).hide();
          i++;
      }                
  });

当这5列被隐藏时，它们不会占用表中的任何空间，因此其余的COLLMN将使用所有可用空间

---

这里的扩展示例（使用切换按钮）

一种不太数学的方法是将隐藏/显示类添加到任何要展开的行中。如果需要删除非连续的行数，则另一种方法会变得很糟糕

$(document).on('click', '.hide-button', function() {
  $(".hide").hide();
  $(".expand").width("25%");
});

$(document).on('click', '.show', function() {
  $(".hide").show(); 
  $(".expand").width("2%");
});

---

有要显示的html/脚本吗？当然。如你所见，前5列都是关于地质时间的，然后最后4列是“肉”。在最后4列中我会有很多信息，所以有时候最好是把地质资料折叠起来：例如，非顺序的你指的是第1列、第2列、第3列、第4列、第8列、第11列，是吗？因此，如果所有地质列都属于“geo”类，所有生物群都属于“biota”，那么这些列的顺序就无关紧要了。是这样吗？我不知道如何批准一个答案，但你的答案肯定有效。

  var arr = [0,1,2,3,4];
  $("td, th").filter(function(){
       return arr.indexOf($(this).index()) > -1;
  }).hide();

$(document).on('click', '.hide-button', function() {
  $(".hide").hide();
  $(".expand").width("25%");
});

$(document).on('click', '.show', function() {
  $(".hide").show(); 
  $(".expand").width("2%");
});