我是一个非常新手的用户，很难找到有关创建可扩展和折叠的html表的信息，默认情况下父行显示而子行隐藏。我设法使用一些在网上搜索到的脚本使它起作用，但是默认情况下会显示子行。我不了解JQuery，并且如果不需要的话，不希望不添加其他语言。我对Javascript的了解非常基础，可以从网上找到的东西进行自我学习。我对CSS和HTML的了解还不错，但还远远不够完善。
这是我所拥有的：
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>如果有人可以帮助我弄清楚默认情况下如何隐藏字幕和主要内容行，那么我将永远背负着债务。
谢谢。
最佳答案
我想要的最终结果是彼此之间有大约15个表，以创建级联的行（进行扩展和折叠）。我设法使其与body标签中的onload一起工作，但是在使其一次与多个功能一起工作时遇到了问题。我通过为每个表各自的函数创建一个新的父函数来解决该问题，如下所示：
<!--
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>