Question

我正在构建的网络应用上有一个管理员用户表，我希望管理员能够让其他人管理，验证和删除帐户。但为了使其适合移动设备，我希望在移动设备上隐藏两列，但也为用户提供了一个按钮，可以选择查看所有内容。问题是，需要三个按钮才能显示整个表格（当它应该只有一个时），按钮不会让我反转动作。这是JS代码：

  const showTable = document.getElementById("showTable");
    
     showTable.addEventListener("click", function() {
     	const hiddens = document.getElementsByClassName("tableHide");
     	for (h of hiddens) {
     		if (h.classList.contains("tableHide")) {
     			h.classList.remove("tableHide");
     			showTable.innerText = "Hide Table";
     		} else {
     			h.classList.add("tableHide");
     		}
     	}
     });

.tableHide {
        display: none;
    }

    <button type='button' id='showTable'>Show Table</button>
    <table>
    <thead>
    <th>First Name</th>
    <th class='tableHide'>Last Name</th>
    <th class='tableHide'>Username</th>
    <th>Validated</th>
    <th>Admin</th>
    <th></th>
    </thead>
    <tbody>
    <tr id='1'>
    <td>Joe</td>
    <td class='tableHide'>Bob</td>
    <td class='tableHide'>joebob@gmail.com</td>
    <td><input type='checkbox' id='validated'><label for='validated'></label></td>
    <td><input type='checkbox' id='isadmin'><label for='isadmin'></label></td>
    <td class='delButCont'><button type='button' class='deleteButtons'>Delete</button></td>
    </tr>
    <tr id='2'>
    <td>Bob</td>
    <td class='tableHide'>Joe</td>
    <td class='tableHide'>bobjoe@gmail.com</td>
    <td><input type='checkbox' id='validated'><label for='validated'></label></td>
    <td><input type='checkbox' id='isadmin'><label for='isadmin'></label></td>
    <td class='delButCont'><button type='button' class='deleteButtons'>Delete</button></td>
    </tr>
    </tbody>
    </table>

一个正在运作的JS解决了这个问题：https://jsfiddle.net/7oh6rch3/1/
我在哪里弄乱了我的逻辑？

Answer 1

您的错误在于您选择HTML元素的方式以及分配/删除CSS类的方式。我使用两个css类来解决这个问题：

＆＃13;

 const showTable = document.getElementById("showTable");
 showTable.addEventListener("click", function() {
 	const hiddens = document.getElementsByClassName("tableHide");
 	for (h of hiddens) {
 		if (h.classList.contains("mobile")) {
 			h.classList.remove("mobile");
 			showTable.innerText = "Hide Table";
 		} else {
 			h.classList.add("mobile");
 		}
 	}
    this.innerHTML = this.innerHTML == 'Show Table' ? 'Hide Table' : 'Show Table';
 })

＆＃13;

.mobile
{
    display: none;
}

＆＃13;

<button type='button' id='showTable'>Show Table</button>
<table>
<thead>
<th>First Name</th>
<th class='tableHide mobile'>Last Name</th>
<th class='tableHide mobile'>Username</th>
<th>Validated</th>
<th>Admin</th>
<th></th>
</thead>
<tbody>
<tr id='1'>
<td>Joe</td>
<td class='tableHide  mobile'>Bob</td>
<td class='tableHide  mobile'>joebob@gmail.com</td>
<td><input type='checkbox' id='validated'><label for='validated'></label></td>
<td><input type='checkbox' id='isadmin'><label for='isadmin'></label></td>
<td class='delButCont'><button type='button' class='deleteButtons'>Delete</button></td>
</tr>
<tr id='2'>
<td>Bob</td>
<td class='tableHide mobile'>Joe</td>
<td class='tableHide mobile'>bobjoe@gmail.com</td>
<td><input type='checkbox' id='validated'><label for='validated'></label></td>
<td><input type='checkbox' id='isadmin'><label for='isadmin'></label></td>
<td class='delButCont'><button type='button' class='deleteButtons'>Delete</button></td>
</tr>
</tbody>
</table>

＆＃13;

还更新了你的小提琴：

https://jsfiddle.net/7oh6rch3/2/

Answer 2

这是因为document.querySelectorAll的结果是live集合，因此每次从元素中删除类tableHide时，它也会从集合中删除，这使得for跳过了一个额外的元素。

您可以将元素复制到数组中以保留选择结果（使其不为live）：

const hiddens = [...document.getElementsByClassName("tableHide")];

按钮上的类不会立即全部关闭

2 个答案: