Javascript 使用css显示/隐藏html表格列

我想显示一个基本html表格，其中包含用于切换显示/隐藏其他列的控件：

<table id="mytable">
    <tr>
        <th>Column 1</th>
        <th class="col1">1a</th>
        <th class="col1">1b</th>
        <th>Column 2</th>
        <th class="col2">2a</th>
        <th class="col2">2b</th>
    </tr>
    <tr>
        <td>100</td>
        <td class="col1">40</td>
        <td class="col1">60</td>
        <td>200</td>
        <td class="col2">110</td>
        <td class="col2">90</td>
    </tr>
</table>

然后在表头单元格上设置onClick函数调用以触发切换，并确定将“mytable”设置为哪个css类以创建我正在寻找的切换效果。有没有一种简单的方法来设置它，这样代码就可以处理n个列

更新 这是我的想法，效果很好，而且速度很快。如果你能想出改进的方法，请告诉我

CSS

Javascript

function toggleColumn(n) {
    var currentClass = document.getElementById("mytable").className;
    if (currentClass.indexOf("show"+n) != -1) {
        document.getElementById("mytable").className = currentClass.replace("show"+n, "");
    }
    else {
        document.getElementById("mytable").className += " " + "show"+n;
    }
}

以及html代码段：

<table id="mytable">
<tr>
    <th onclick="toggleColumn(1)">Col 1 = A + B + C</th>
    <th class="col1">A</th>
    <th class="col1">B</th>
    <th class="col1">C</th>
    <th onclick="toggleColumn(2)">Col 2 = D + E + F</th>
    <th class="col2">D</th>
    <th class="col2">E</th>
    <th class="col2">F</th>
    <th onclick="toggleColumn(3)">Col 3 = G + H + I</th>
    <th class="col3">G</th>
    <th class="col3">H</th>
    <th class="col3">I</th>
</tr>
<tr>
    <td>20</td>
    <td class="col1">10</td>
    <td class="col1">10</td>
    <td class="col1">0</td>
    <td>20</td>
    <td class="col2">10</td>
    <td class="col2">8</td>
    <td class="col2">2</td>
    <td>20</td>
    <td class="col3">10</td>
    <td class="col3">8</td>
    <td class="col3">2</td>
</tr>
</table>

第1列=A+B+C
A.
B
C
第2列=D+E+F
D
E
F
第3列=G+H+I
G
H
我
20
10
10
0
20
10
8.
2.
20
10
8.
2.

不，差不多就是这样。理论上，您可以在一些

​这是必须的，但浏览器支持还不完全存在

---

要稍微改进现有的功能，可以使用

上的

表布局：fixed

，以允许浏览器使用更简单、更快和更可预测的固定表布局算法。您还可以删除

.show

规则，就像当一个单元格不是由

创建的
display:none
规则一样。hide

规则将自动成为

display:table cell

。允许table display恢复为默认值而不是显式设置它可以避免IE中的问题我不认为您可以做任何事情来避免您已经在做的事情，但是，如果您使用javascript在客户端上构建表，您始终可以动态添加样式规则，因此，您可以允许任意数量的列，而不会因为所有这些规则而使css文件变得混乱。看看你是否不知道怎么做

编辑： 对于“粘性”切换，您应该只附加类名，而不是替换它们。例如，您可以给它一个类名“hide2 hide3”等等。我认为您并不真正需要“show”类，因为这是默认的。像jQuery这样的库使这变得容易，但如果没有，这样的函数可能会有所帮助：

var modifyClassName = function (elem, add, string) {
var s = (elem.className) ? elem.className : "";
var a = s.split(" ");
if (add) {
  for (var i=0; i<a.length; i++) {
      if (a[i] == string) {
          return;
          }
      }
  s += " " + string;
  }
else {
    s = "";
    for (var i=0; i<a.length; i++) {
        if (a[i] != string)
            s += a[i] + " "; 
        }
    }
elem.className = s;
}

var modifyClassName=函数（元素、添加、字符串）{
变量s=（elem.className）？elem.className:；
var a=s.split（“”）；
如果（添加）{
对于（var i=0；i使用jQuery的一行代码：

$('td:nth-child(2)').hide();

// If your table has header(th), use this:
//$('td:nth-child(2),th:nth-child(2)').hide();

来源：
如果要查找简单的列隐藏，也可以使用：n子选择器

#tableid tr td:nth-child(3),
#tableid tr th:nth-child(3) {
    display: none;
}

有时，当屏幕太窄时，我使用@media标记来压缩较宽的表格。
+1用于提及表格布局：修复。我发现这在显示表格格式数据时有很大帮助。感谢您提出表格布局：修复，但在我的情况下它不起作用。处理具有波动列的怪物表格zes最终需要表格布局：自动以使其看起来更美观。这是一个遗憾。固定表格可以比自动平滑得多。（
Fixed
不一定意味着所有列都必须具有固定的宽度，只是宽度不取决于每个单元格中的内容量。）好吧，看来没有其他方法可以做到这一点，但有没有一种方法可以做到这一点，所以这是一个“棘手的问题”切换？现在，每次我显示一列时，显示的另一列将进入隐藏状态。我想我必须添加css规则来专门处理每个排列？？？我希望不会…如果我处理5个显示/隐藏列，这将不会很有趣。嗯，IE7不喜欢我发布的解决方案。我可以让它与显示的所有列一起工作默认情况下，但默认情况下不支持隐藏…您可以添加多个类：
table.className='show1 show3'
等。我怀疑IE的问题是，正如我提到的，它不支持
display:table cell
。我会使用
hide
之类的类，而不是
show
，因此您只需声明
table.hide1 col1即可{显示：无；}
。您的编辑帮了我很大的忙！现在我看到这一点，粘性切换真的很容易！谢谢！当您试图隐藏打印样式表的某些列时，此选择器也非常有效。在摆弄了在chrome中似乎不起作用的标记后，此选项非常有效。请记住，此选项仅适用于具有每行的单元格数相等。例如，如果您有一些单元格具有
colspan=“2”
，而该行其余部分的单元格数较少，则
n子项将从错误的“列”中选择（在本例中隐藏）单元格。因此，请确保在编辑表的位置旁边保留列隐藏机制的注释/注释，以便将来的编辑器不会破坏布局。
$('td:nth-child(2)').hide();

// If your table has header(th), use this:
//$('td:nth-child(2),th:nth-child(2)').hide();

#tableid tr td:nth-child(3),
#tableid tr th:nth-child(3) {
    display: none;
}