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

Question

我正在尝试从html表中的书中整理所有章节及其各自的主题。如果我为每个主题（来自所有22章）添加一个td，则该表将太长。我想在每个章节的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>

Answer 1

请更改CSS：

.show{
    display: block !important;
}

此示例：

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 !important;
}

<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>

Answer 2

这里的问题是 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>

Answer 3

你非常亲近。

但是对于表元素，您需要使用另一个名为#t1 id的属性。如果您发现还需要包含#t1 style，因为.show本身不会覆盖#t1{ visibility: collapse; } #t1.show{ visibility: visible; } ：

CSS

{{1}}