javascript - 在页面加载时显示固定列，当用户单击符号时显示 html 表中的剩余列

Question

我只想在用户加载页面时显示前两列，并且在表头附近应显示箭头标记或某些符号，当用户单击该符号时，应显示其余列。无法在线找到任何示例。我们可以使用 html、javascript、jquery 来实现吗？请在 http://jsfiddle.net/TweNm/2338/ 中找到示例. 我的要求是在用户加载页面时显示 A 列和 B 列，并在标题附近显示一个箭头，当用户单击箭头时，应显示其余列。请提出建议。

下面是示例 CSS 代码:

#table-wrapper {
  position:relative;
}
#table-scroll {
  height:150px;
  overflow:auto;  
  margin-top:20px;
}
#table-wrapper table {
  width:100%;

}
#table-wrapper table * {
  background:yellow;
  color:black;
}
#table-wrapper table thead th .text {
  position:absolute;   
  top:-20px;
  z-index:2;
  height:20px;
  width:35%;
  border:1px solid red;
}

谢谢。

Answer 1

是的，这绝对可行!您可以像这样隐藏除前两列之外的所有列:

table.collapsed th:not(:nth-child(1)):not(:nth-child(2)), 
table.collapsed td:not(:nth-child(1)):not(:nth-child(2)) {
    visibility: hidden;   
}

然后只需安装一些 javascript 即可在您单击箭头时从表中删除折叠类。这是基于您提供的 jsfiddle 的非常非常粗略的原型(prototype):

http://jsfiddle.net/TweNm/2341/