Javascript 使用 css 显示/隐藏 html 表格列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2858339/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
show/hide html table columns using css
提问by Art Peterson
I want to display a basic html table with controls to toggle showing/hiding of additional columns:
我想显示一个基本的 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>
So Column 1 and Column 2 will be the only columns displayed by default - but when you click on the Column 1 I want 1a and 1b to toggle, and same with Column 2 with 2a and 2b. I may end up with more columns and lots of rows - so any javascript looping approaches have been too slow to work with when I tested.
因此，第 1 列和第 2 列将是默认情况下显示的唯一列 - 但是当您单击第 1 列时，我希望 1a 和 1b 切换，与第 2 列和 2a 和 2b 相同。我最终可能会得到更多的列和很多行 - 所以当我测试时，任何 javascript 循环方法都太慢而无法使用。
The only approach that seems to be fast enough is to set up some css like this:
似乎足够快的唯一方法是像这样设置一些 css：
table.hide1 .col1 { display: none; }
table.hide2 .col2 { display: none; }
table.hide3 .col3 { display: none; }
table.show1 .col1 { display: table-cell; }
table.show2 .col2 { display: table-cell; }
table.show3 .col3 { display: table-cell; }
And then set up onClick function calls on the table header cells that will trigger a toggle - and determine which css class to set "mytable" to that will create the toggle effect that I'm looking for. Is there an easy way to set this up so that the code can work for n # of columns?
然后在将触发切换的表标题单元格上设置 onClick 函数调用 - 并确定将“mytable”设置为哪个 css 类将创建我正在寻找的切换效果。有没有一种简单的方法来设置它，以便代码可以用于 n # 列？
Update
更新
Here is what I came up with, works great - and really fast. Let me know if you can think of ways to improve.
这是我想出的，效果很好 - 而且非常快。如果您能想出改进的方法，请告诉我。
CSS
CSS
.col1 {display: none; }
.col2 {display: none; }
.col3 {display: none; }
table.show1 .col1 { display: table-cell; }
table.show2 .col2 { display: table-cell; }
table.show3 .col3 { display: table-cell; }
Javascript
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;
}
}
And the html snippet:
和 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>
采纳答案by bobince
No, that's pretty much it. In theory you could use visibility: collapseon some <col>?s to do it, but browser support isn't all there.
不，差不多就是这样。从理论上讲，您可以使用visibility: collapse某些<col>?s 来做到这一点，但浏览器支持并不是全部。
To improve what you've got slightly, you could use table-layout: fixedon the <table>to allow the browser to use the simpler, faster and more predictable fixed-table-layout algorithm. You could also drop the .showrules as when a cell isn't made display: noneby a .hiderule it will automatically be display: table-cell. Allowing table display to revert to default rather than setting it explicitly avoids problems in IE<8, where the table display values are not supported.
为了稍微改进一下，您可以使用table-layout: fixedon<table>来允许浏览器使用更简单、更快和更可预测的固定表布局算法。您还可以删除.show规则，因为当单元格不是display: none由.hide规则创建时，它会自动成为display: table-cell. 允许表显示恢复为默认值而不是明确设置它可以避免 IE<8 中不支持表显示值的问题。
回答by Leniel Maccaferri
One line of code using jQuery:
使用 jQuery 的一行代码：
$('td:nth-child(2)').hide();
// If your table has header(th), use this:
//$('td:nth-child(2),th:nth-child(2)').hide();
Source: Hide a Table Column with a Single line of jQuery code
回答by Ponyboy
if you're looking for a simple column hide you can use the :nth-child selector as well.
如果您正在寻找一个简单的列隐藏，您也可以使用 :nth-child 选择器。
#tableid tr td:nth-child(3),
#tableid tr th:nth-child(3) {
display: none;
}
I use this with the @media tag sometimes to condense wider tables when the screen is too narrow.
当屏幕太窄时，我有时会将它与 @media 标签一起使用以压缩更宽的表格。
回答by rob
I don't think there is anything you can do to avoid what you are already doing, however, if you are building the table on the client with javascript, you can always add the style rules dynamically, so you can allow for any number of columns without cluttering up your css file with all those rules. See http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascriptif you don't know how to do this.
我不认为你可以做任何事情来避免你已经在做的事情，但是，如果你使用 javascript 在客户端上构建表，你总是可以动态添加样式规则，这样你就可以允许任意数量的列，而不会用所有这些规则弄乱您的 css 文件。如果您不知道如何执行此操作，请参阅http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript。
Edit: For your "sticky" toggle, you should just append class names rather than replacing them. For instance, you can give it a class name of "hide2 hide3" etc. I don't think you really need the "show" classes, since that would be the default. Libraries like jQuery make this easy, but in the absence, a function like this might help:
编辑：对于您的“粘性”切换，您应该只附加类名而不是替换它们。例如，你可以给它一个“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;
}
