javascript 实现table展开折叠

最新推荐文章于 2021-12-14 11:32:59 发布

东语~

最新推荐文章于 2021-12-14 11:32:59 发布

阅读量2.9w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 开发文章标签： table 展开折叠 javascript

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/psp0001060/article/details/49387989

JavaScript 开发专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何使用JavaScript实现在IE8及以上浏览器中实现table下的内容展开和折叠功能，包括HTML代码和操作逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文是通过JavaScript实现table下的内容展开、折叠（仅在IE8以后可用）。

下载链接 http://download.youkuaiyun.com/detail/psp0001060/9210119

展开状态：（点击“-”，变成折叠状态）

折叠状态：（点击“+”，变成展开状态）

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title>案件一覧</title>
<script type="text/javascript">
<!--
// 検索条件表示切替
function searchChange() {
	if (document.getElementById("searchChangeFlg").value == "1") {
		document.getElementById("tr2").style.display="block";
		document.getElementById("tr3").style.display="block";
		document.getElementById("tr4").style.display="block";
		document.getElementById("searchChange").innerHTML = "－";
		document.getElementById("searchChangeFlg").value = "0";
	} else {
		document.getElementById("tr2").style.display="none";
		document.getElementById("tr3").style.display="none";
		document.getElementById("tr4").style.display="none";
		document.getElementById("searchChange").innerHTML = "＋";
		document.getElementById("searchChangeFlg").value = "1";
	}

	return false;
}
// -->
</script>
<style>
table  {
	border-collapse:collapse;
	width:50%;
}
th {
	border:1px solid black;
}
td {
	border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr id="tr1">
<th colspan="1" width="1%">
<a id="searchChange" onclick="return searchChange()" href="">－</a>
</th>
<th colspan="4">
title
</th>
</tr>
<tr id="tr2">
<td rowspan="3"> </td>
<td>123456</td>
<td>789456</td>
<td>017852</td>
<td>698852</td>
</tr>
<tr id="tr3">
<td>apple</td>
<td>bags</td>
<td>balana</td>
<td>orange</td>
</tr>
<tr id="tr4">
<td>１２３４５</td>
<td>６７８９０</td>
<td>１２３４５</td>
<td>６７８９０</td>
</tr>
</table>

<input type="hidden" name="searchChangeFlg" id="searchChangeFlg" value="0" />

</body>
</html>