Question

我是一个非常新手的用户，并且很难找到有关创建html表的信息，这些表会在父行显示和默认隐藏子行的情况下展开和折叠。我设法使用我在网上搜索的一些脚本使其工作但默认显示子行。我不了解JQuery，如果不必要，我宁愿不添加其他语言。我对Javascript的了解非常基础，我可以在网上找到自学。我对CSS和HTML的了解很不错，但远非完美。

这就是我所拥有的：

＆＃13;

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 = '[-] ';
		}

＆＃13;

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

＆＃13;

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

＆＃13;

如果有人可以帮我弄明白如何隐藏字幕和主要内容行，那么我将永远为你负债。

感谢。

Answer 1

我尝试过的最终结果将会有大约15个彼此重叠的表格来创建展开和折叠的级联行（排序）。我设法让它与body标签中的onload一起工作，但是在让它同时使用多个函数时遇到了问题。我通过为每个表创建一个新的父函数解决了这个问题，如下所示：

＆＃13;

<!--
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');
}
//-->

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

隐藏元素的一种方法是将display属性设置为none。您的脚本以后仍然可以更改显示属性。试试这个：

#td75, #subtitle {
    display: none;
}

作为旁注，我建议将表格元素更改为div。 Div更易于操作，可以轻松地用于创建响应表。

默认情况下，在展开和折叠表时隐藏行

2 个答案: