无法在响应模式下显示/隐藏表列

Question

我的按钮有问题，无法工作。当点击按钮时，它应该显示另一列并隐藏其他列以进行移动查看。我用JavaScript尝试了它，并添加了onclick函数，但它仍然没有显示其他列。例如，当单击按钮编号2时，它应该隐藏类为second-column、forth-column、fifth-column的列，并显示列third-column

在代码中，你会看到我使用了javascript和css，但没有一个能工作

function myFun(){

document.getElementsByClassName("second-column").style.display="block";
document.getElementsByClassName("third-column").style.display="none";
document.getElementsByClassName("forth-column").style.display="none";
document.getElementsByClassName("fifth-column").style.display="none";

}

function myFunc(){

document.getElementsByClassName("second-column").style.display="none";
document.getElementsByClassName("third-column").style.display="block";
document.getElementsByClassName("forth-column").style.display="none";
document.getElementsByClassName("fifth-column").style.display="none";

}

function myFunct(){

document.getElementsByClassName("second-column").style.display="none";
document.getElementsByClassName("third-column").style.display="none";
document.getElementsByClassName("forth-column").style.display="block";
document.getElementsByClassName("fifth-column").style.display="none";

}

function myFuncti(){

document.getElementsByClassName("second-column").style.display="none";
document.getElementsByClassName("third-column").style.display="none";
document.getElementsByClassName("forth-column").style.display="none";
document.getElementsByClassName("fifth-column").style.display="block";

}

@media all and (max-width:900px) {
.table {
width: 100%;
}
.second-column {
width: 50%;
}
.space {
display: none;
}
.third-column {
display: none;
}
.forth-column {
display: none;
}
.fifth-column {
display: none;
}
.table.fixed {
table-layout: fixed;
}
td:first-child {
width: 50%;
}
.btn-div {
display: block !important;
}
#btn-1:focus~.second-column {
display: block!important;
}
#btn-1:focus~.third-column,
.forth-column,
.fifth-column {
display: none!important;
}
#btn-2:focus~.third-column {
display: block!important;
}
#btn-2:focus~.second-column,
.forth-column,
.fifth-column {
display: none!important;
}
#btn-3:focus~.forth-column {
display: block!important;
}
#btn-3:focus~.second-column,
.third-column,
.fifth-column {
display: none!important;
}
#btn-4:focus~.fifth-column {
display: block!important;
}
#btn-4:focus~.second-column,
.third-column,
.forth-column {
display: none!important;
}
}

<div>
<table class="table fixed">
<tr>
<th style="border-bottom: none;"></th>
<th class="space"></th>
<th class="second-column">111</th>
<th class="third-column">222 </th>
<th class="forth-column">333 </th>
<th class="fifth-column">444 </th>
</tr>
<tr>
<td> !</td>
<td class="space"></td>
<td class="second-column"> 1</td>
<td class="third-column"> 2</td>
<td class="forth-column"> 3</td>
<td class="fifth-column">4</td>
</tr>
<tr>
<td> %</td>
<td class="space"></td>
<td class="second-column"> 1</td>
<td class="third-column"> 2</td>
<td class="forth-column"> 3</td>
<td class="fifth-column"> 4</td>
</tr>
<tr>
<td>$</td>
<td class="space"></td>
<td class="second-column"> 1</td>
<td class="third-column">2</td>
<td class="forth-column"> 3</td>
<td class="fifth-column"> 4</td>
</tr>
<tr>
<td> @</td>
<td class="space"></td>
<td class="second-column"> 1</td>
<td class="third-column"> 2</td>
<td class="forth-column"> 3</td>
<td class="fifth-column"> 4</td>
</tr>
<tr>
<td> #</td>
<td class="space"></td>
<td class="second-column"> 1</td>
<td class="third-column">2</td>
<td class="forth-column"> 3</td>
<td class="fifth-column"> 4</td>
</tr>
<tr>
<td>$$ </td>
<td class="space"></td>
<td class="second-column"> 1</td>
<td class="third-column"> 2</td>
<td class="forth-column"> 3</td>
<td class="fifth-column">4</td>
</tr>
</table>
<div style="text-align: center;display: none;" class="btn-div">
<button type="button" class="this-btn add-add" id="btn-1" onClick="myFun()">1</button>
<button type="button" class="this-btn add-add" id="btn-2" onClick="myFunc()">2</button>
<button type="button" class="this-btn add-add"id="btn-3" onClick="myFunct()" >3</button>
<button type="button" class="this-btn add-add" id="btn-4" onClick="myFuncti()">4</button>
</div>
</div>

Answer 1

我知道这个问题。当使用getElementsByClassName()时，它返回html集合。所以它组合了节点列表中的所有元素，所以如果我想访问某个元素，我应该使用该元素的索引号。例如：

document.getElementsByClassName('second-column')[0].style.display="none";

但如果你想更改或访问所有元素，那么你应该使用循环

这解决了我的问题：

function myFun(){

[...document.getElementsByClassName("second-column")].forEach(e => e.style.display = "table-cell");
[...document.getElementsByClassName("third-column")].forEach(e => e.style.display = "none");
[...document.getElementsByClassName("forth-column")].forEach(e => e.style.display = "none");
[...document.getElementsByClassName("fifth-column")].forEach(e => e.style.display = "none");

}

或者这样：

var x = document.getElementsByClassName('third-column');
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}

并对每个类名重复此操作