javascript - 展开和折叠 HTML 表格
问题描述
免责声明:我是 HTML、javascript 和 CSS 新手。
我想要做的是有一个可展开/可折叠的 HTML 表格,如下所示。单击“Values 1”应显示“Category 1”(还有其他类别,但为了最小化代码,我只显示了 1 个类别)。然后单击“类别 1”将显示更多子值。问题是单击“值 1”时,它仅隐藏“类别 1”,同时仍显示子值。任何想法如何通过最少的代码更改轻松更改它,以便单击值 1 隐藏类别 1 和子值。请注意,还有更多类别和子值,因此也需要隐藏它们。
理想情况下,单击“值 1”应该隐藏所有类别和子值,而再次单击它应该将类别和子值恢复到它们的任何状态,无论是隐藏的还是可见的。
希望这是有道理的。提前致谢
折叠:
展开(错误):
< script src = "https://code.jquery.com/jquery-1.11.3.min.js" >
$(document).ready(function() {
$('[data-toggle="toggle"]').change(function() {
$(this).parents().next('.hide').toggle();
});
});
$(document).ready(function() {
$(".expandFRED").click(function() {
$(".expandSUB1").toggle();
});
$(".expandVALS").click(function() {
$(".expandCAT1").toggle();
});
}) <
/script>
.label tr td label {
display: block;
}
[data-toggle='toggle'] {
display: none;
}
.expandSUB1 {
display: none;
}
. {
display: none;
}
.expandCAT1 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<table class='imagetable' align='center'>
<caption><b></b></caption>
<tbody class="labels">
<tr>
<td class='expandFRED' colspan='7'>Values 1 (click here to expand/collapse)
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td class='expandSUB1 expandVALS'>Category 1 (click here to expand/collapse)
</td>
<td class='expandSUB1'></td>
<td class='expandSUB1' align='right'>$461.11
</td>
<td class='expandSUB1'></td>
<td class='expandSUB1' align='right'>$428.33</td>
<td class='expandSUB1' align='right'>-7.11%
</td>
<td class='expandSUB1' align='right'>$-32.78</td>
</tr>
<tr>
<td class='expandCAT1'> SubValue 1</td>
<td class='expandCAT1' align='right'>0.405582</td>
<td class='expandCAT1'></td>
<td class='expandCAT1' align='right'>0.405582</td>
<td class='expandCAT1'></td>
<td class='expandCAT1'></td>
<td class='expandCAT1'></td>
</tr>
<tr>
<td class='expandCAT1'> SubValue 2</td>
<td class='expandCAT1' align='right'>1</td>
<td class='expandCAT1'></td>
<td class='expandCAT1' align='right'>1</td>
<td class='expandCAT1'></td>
<td class='expandCAT1'></td>
<td class='expandCAT1'></td>
</tr>
<tr>
<td class='expandCAT1'> SubValue 3</td>
<td class='expandCAT1' align='right'>1.392379</td>
<td class='expandCAT1'></td>
<td class='expandCAT1' align='right'>1.407569</td>
<td class='expandCAT1'></td>
<td class='expandCAT1'></td>
<td class='expandCAT1'></td>
</tr>
</tbody>
</table>
</body>
</html>
解决方案
嗨,据我所知,您应该在 expandFRED 类单击事件中切换隐藏类以切换下面的整个表格是总代码
请你应用你的CSS
$(document).ready(function() {
$('[data-toggle="toggle"]').change(function() {
$(this).parents().next('.hide').toggle();
});
});
$(document).ready(function() {
$(".expandFRED").click(function() {
$(".expandSUB1").toggle();
});
$(".expandVALS").click(function() {
$(".expandCAT1").toggle();
});
$(".expandFRED").click(function() {
$(".hide").toggle();
});
})
.imagetable {
border: 1px solid black;
}
.label tr td label {
display: block;
border: 1px solid black;
}
td {
border: 1px solid black;
}
[data-toggle='toggle'] {
display: block;
}
/*.expandSUB1 {
display: block;
}
.expandFRED {
display: block;
}
.expandCAT1 {
display: block;
}*/
<table class='imagetable' align='center'>
<caption><b></b></caption>
<tbody class="labels">
<tr>
<td class='expandFRED' colspan='7'>
Values 1 (click here to expand/collapse)
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td class='expandSUB1 expandVALS'>
Category 1 (click here to expand/collapse)
</td>
<td class='expandSUB1'></td>
<td class='expandSUB1' align='right'>
$461.11
</td>
<td class='expandSUB1'></td>
<td class='expandSUB1' align='right'>$428.33</td>
<td class='expandSUB1' align='right'>
-7.11%
</td>
<td class='expandSUB1' align='right'>$-32.78</td>
</tr>
<tr>
<td class='expandCAT1'> SubValue 1</td>
<td class='expandCAT1' align='right'>0.405582</td>
<td class='expandCAT1'></td>
<td class='expandCAT1' align='right'>0.405582</td>
<td class='expandCAT1'></td>
<td class='expandCAT1'></td>
<td class='expandCAT1'></td>
</tr>
<tr>
<td class='expandCAT1'> SubValue 2</td>
<td class='expandCAT1' align='right'>1</td>
<td class='expandCAT1'></td>
<td class='expandCAT1' align='right'>1</td>
<td class='expandCAT1'></td>
<td class='expandCAT1'></td>
<td class='expandCAT1'></td>
</tr>
<tr>
<td class='expandCAT1'> SubValue 3</td>
<td class='expandCAT1' align='right'>1.392379</td>
<td class='expandCAT1'></td>
<td class='expandCAT1' align='right'>1.407569</td>
<td class='expandCAT1'></td>
<td class='expandCAT1'></td>
<td class='expandCAT1'></td>
</tr>
</tbody>
</table>
推荐阅读
- twilio - 业务方面的 Twilio 通知
- c++ - 是否可以将 Clang-Tidy 与 QNX 一起使用?
- xml - functx:remove-attributes 添加一个空的 xmlns
- azure - 如何创建范围为特定资源类型的 Azure 角色分配
- mysql - 如何在给定附加 ID 的情况下按最近日期排序
- angularjs - Angularjs:在表格中上传文件
- python - 如何向 StepModel 添加倾斜
- reactjs - Jest 和文件加载器导入
- php - 为什么 php sleep() 会暂停所有脚本的执行?
- python - Beautifulsoup 通过搜索的类提取数据