javascript - 使用 JavaScript 显示/隐藏表格数据

Question

我正在尝试在 html 表中组织一本书中的所有章节及其各自的主题。如果我td为每个主题（来自所有 22 章）添加一个，表格将变得太长。我想在每个章节中设置一个按钮 td，这样我tr只需单击它就可以在下面显示所有主题。

我认为下面的代码可以正常工作，但事实并非如此。有任何想法吗？谢谢！

var t1 = document.getElementById("t1");

function TogTop() {
	if (t1.classList.contains("show") == false) {
		t1.classList.add("show");
	} else {
		t1.classList.remove("show");
	}
}

#t1 {
	display: none;
}
.show {
	display: block;
}

<table>
	<tbody>
		<tr>
			<td>[1] Data Communications, Data Networking, and the Internet <button onclick="TogTop()">Topics</button></td>
			<td>[2] Protocol Architecture, TCP/IP, and the Internet-Based Applications</td>
		</tr>
		<tr id="t1">
			<td colspan="2">
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</td>
		</tr>
		<tr>
			<td>[3] Data Transmission</td>
			<td>[4] Transmission Media</td>
		</tr>
		<tr>
			<td>[5] Signal Encoding Techniques</td>
			<td>[6] Digital Data Communication Techniques</td>
		</tr>
	</tbody>
</table>

标签： javascripthtmlcss

Answer 1

这里的问题是ID比CLASS更流行。您可以将 t1 的 id 替换为 t1 的类。

var t1 = document.querySelector(".t1");
function TogTop(){
     if (!t1.classList.contains("show")){
        t1.classList.add("show");
    }else{
        t1.classList.remove("show");
    }
}

.t1{
    display: none;
}
.show{
    display: block;
}

<table>
    <tbody>
        <tr>
   <td>[1] Data Communications, Data Networking, and the Internet <button onclick="TogTop()">Topics</button></td>
  <td>[2] Protocol Architecture, TCP/IP, and the Internet-Based Applications</td>
        </tr>
        <tr id="t1" class="t1">
            <td colspan="2">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </td>
        </tr>
        <tr>
           <td>[3] Data Transmission</td>
           <td>[4] Transmission Media</td>
        </tr>
        <tr>
            <td>[5] Signal Encoding Techniques</td>
            <td>[6] Digital Data Communication Techniques</td>
        </tr>
    </tbody>
</table>