您的位置：首页 > Web前端 > JavaScript

javascript 实现table展开折叠

2015-10-24 20:37 806 查看

本文是通过JavaScript实现table下的内容展开、折叠。

下载链接 http://download.csdn.net/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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航