默认情况下在展开和折叠表中隐藏行
[英]Hide rows by default in expanding and collapsing tables
问题描述
I'm an extremely novice user and am having a really hard time finding information on creating html tables that expand and collapse with the parent row showing and child rows hidden by default. 
我是一个非常新手的用户，很难找到有关创建可扩展和折叠的html表的信息，默认情况下父行显示而子行隐藏。 I've managed to make it work using some scripts I found searching online but the child rows are displayed by default. 我设法使用一些在网上搜索到的脚本使它起作用，但是默认情况下会显示子行。 I have no knowledge of JQuery and would prefer not to add another language if I don't have to. 我不了解JQuery，并且如果不需要的话，不希望不添加其他语言。 My knowledge of Javascript is pretty basic, self taught from what I can find online. 我对Javascript的了解非常基础，可以从网上找到的东西进行自我学习。 My knowledge of CSS and HTML are decent, but far from perfect. 我对CSS和HTML的了解还不错，但还远远不够完善。
Here is what I have: 这是我所拥有的：
function toggle_visibility(tbid,lnkid) { if (document.getElementsByTagName) { var tables = document.getElementsByTagName('table'); for (var i = 0; i < tables.length; i++) { if (tables[i].id == tbid){ var trs = tables[i].getElementsByTagName('tr'); for (var j = 2; j < trs.length; j+=1) { trs[j].bgcolor = '#CCCCCC'; if(trs[j].style.display == 'none') trs[j].style.display = ''; else trs[j].style.display = 'none'; } } } } var x = document.getElementById(lnkid); if (x.innerHTML == '[-] ') x.innerHTML = '[+] '; else x.innerHTML = '[-] '; }
a { color: #ff0000; } #exco { color: #ff0000; text-decoration: none; } #tbl3RD { width: 100%; border: 1px solid #ff0000; border-bottom-width: 0px; cellspacing: 0px; border-spacing: 0px; } #dark { background-color: #242424; } #light { background-color: #8C8C8C; } #td75 { width: 75%; } #td25 { width: 25%; } #title { font-size: 110%; color: #FFFFFF; font-weight: bold; } #subtitle { color: #242424; font-weight: bold; }
<table id="tbl3RD" name="tbl3RD"> <tr id="dark"> <td colspan="2"></td> </tr> <tr id="dark"> <td id="title"> Title of the table. </td> <td id="td75"> <a id="exco" href="javascript:toggle_visibility('tbl3RD','lnk3RD');"> <div align="right" id="lnk3RD" name="lnk3RD">[-] </div> </a> </td> </tr> <tr id="light"> <td id="subtitle" colspan="2"> Subtitle row that explains the content. </td> </tr> <tr> <td> </td> <td id="td75"> Main content of the table. </td> </tr> </table>
If anyone can help me figure out how to have the subtitle and main content rows hidden by default I would be forever in your debt. 如果有人可以帮助我弄清楚默认情况下如何隐藏字幕和主要内容行，那么我将永远背负着债务。
Thanks. 谢谢。
2 个解决方案
解决方案1
1 已采纳 2015-04-03 06:05:04
The final result of what I'm trying to will have about 15 tables ontop of each other to create cascading rows (sort of) that expand and collapse. 我想要的最终结果是彼此之间大约有15个表，以创建级联的行（进行扩展和折叠）。 I managed to get it to work with an onload in the body tag but was having issues getting it to work with multiple functions at once. 我设法使其与body标签中的onload一起工作，但是在使其一次与多个功能一起工作时遇到了问题。 I resolved the issue by creating a new parent function for each tables respective function like this: 我通过为每个表各自的函数创建一个新的父函数来解决该问题，如下所示：
<!-- function toggle_visibility(tbid,lnkid) { if (document.getElementsByTagName) { var tables = document.getElementsByTagName('table'); for (var i = 0; i < tables.length; i++) { if (tables[i].id == tbid){ var trs = tables[i].getElementsByTagName('tr'); for (var j = 2; j < trs.length; j+=1) { trs[j].bgcolor = '#CCCCCC'; if(trs[j].style.display == 'none') trs[j].style.display = ''; else trs[j].style.display = 'none'; } } } } var x = document.getElementById(lnkid); if (x.innerHTML == '[-] ') x.innerHTML = '[+] '; else x.innerHTML = '[-] '; } function start() { toggle_visibility('tbl3RD','lnk3RD'); toggle_visibility('tblW8','lnkW8'); } //-->
a { color: #ff0000; } #exco { color: #ff0000; text-decoration: none; } #tbl3RD, #tblW8 { width: 100%; border: 1px solid #ff0000; border-bottom-width: 0px; cellspacing: 0px; border-spacing: 0px; } #dark { background-color: #242424; } #light { background-color: #8C8C8C; } #td75 { width: 75%; } #td25 { width: 25%; } #title { font-size: 110%; color: #FFFFFF; font-weight: bold; } #subtitle { color: #242424; font-weight: bold; }
<html> <head> <title>Test</title> <link rel="stylesheet" type="text/css" href="test.css"> <script src="test.js"></script> </head> <body onload="start();"> <table id="tbl3RD" name="tbl3RD"> <tr id="dark"> <td colspan="2"></td> </tr> <tr id="dark"> <td id="title"> Title of the table. </td> <td id="td75"> <a id="exco" href="javascript:toggle_visibility('tbl3RD','lnk3RD');"> <div align="right" id="lnk3RD" name="lnk3RD">[-] </div> </a> </td> </tr> <tr id="light"> <td id="subtitle" colspan="2"> Subtitle row that explains the content. </td> </tr> <tr> <td> </td> <td id="td75"> Main content of the table. </td> </tr> </table> <table id="tblW8" name="tblW8"> <tr id="dark"> <td colspan="2"></td> </tr> <tr id="dark"> <td id="title"> Title of the table. </td> <td id="td75"> <a id="exco" href="javascript:toggle_visibility('tblW8','lnkW8');"> <div align="right" id="lnkW8" name="lnkW8">[-] </div> </a> </td> </tr> <tr id="light"> <td id="subtitle" colspan="2"> Subtitle row that explains the content. </td> </tr> <tr> <td> </td> <td id="td75"> Main content of the table. </td> </tr> </table> </body> </html>
解决方案2
0 2015-04-02 03:52:04
One way to hide elements is to set the display property to none. 隐藏元素的一种方法是将display属性设置为none。 Your script will still be able to change the display property later. 您的脚本以后仍然可以更改显示属性。 Try this: 尝试这个：
#td75, #subtitle {
display: none;
}
As a side note, I suggest changing your table elements to divs. 另外，我建议将表格元素更改为div。 Divs are much easier to manipulate and can easily be used to create a responsive table. Divs易于操纵，并且可以轻松用于创建响应表。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.