我想显示一个基本的 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>
因此,第 1 列和第 2 列将是默认显示的唯一列 - 但是当您单击第 1 列时,我希望 1a 和 1b 切换,与第 2 列相同,2a 和 2b。我最终可能会得到更多的列和更多的行 - 因此在我测试时,任何 javascript 循环方法都太慢而无法使用。
唯一看起来足够快的方法是像这样设置一些 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; }
然后在将触发切换的表格标题单元格上设置 onClick 函数调用 - 并确定要将“mytable”设置为哪个 css 类,这将创建我正在寻找的切换效果。是否有一种简单的方法来设置它,以便代码可以处理 n # 列?
更新
这是我想出的,效果很好——而且速度非常快。如果您能想出改进方法,请告诉我。
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
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>
最佳答案
使用 jQuery 的一行代码:
$('td:nth-child(2)').hide();
// If your table has header(th), use this:
//$('td:nth-child(2),th:nth-child(2)').hide();
关于javascript - 使用 css 显示/隐藏 html 表格列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2858339/