javascript 实现table展开折叠

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

下载链接 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" οnclick="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>

javascript 实现table展开折叠相关推荐

Android：展开/折叠动画
假设我有一个带有以下内容的垂直linearLayout: [v1] [v2] 默认情况下,v1的可见值= GONE. 我想用扩展动画显示v1并同时按下v2. 我尝试过这样的事情: Animation ...
js 控制展开折叠 div html dom
js 控制展开折叠 div html dom <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...
（原创）一个JavaScript Function Outliner插件第三个版本让你的JavaScript代码也支持折叠...
今天我为大家带来JavaScript Function Outliner插件的第三个版本,在这个版本里我们也可以对JavaScript的代码进行折叠了不过目前支持折叠的就function 发布前两个 ...
android 折叠动画,Android：展开/折叠动画
Android:展开/折叠动画假设我有一个垂直linearLayout: [v1] [v2] 默认情况下,v1具有visibily = GONE. 我想用扩展动画展示v1并同时向下推v2. 我试过这 ...
el-table表单一键展开折叠，展开部分后一键全部展开或折叠
实现功能: 1.表单一键展开或者一键折叠 2.表单点击展开一部分后,再次点击展开或折叠按钮可以全部展开或全部折叠 3.完整代码在最后 1.建立el-table的树形结构 1.ref="tab ...
java中table是什么标签_[Java教程]javascript格式化table标签内容
[Java教程]javascript格式化table标签内容 0 2015-07-12 20:00:08 项目中遇到这样的需求,一大段文章正文的html代码在手机中显示不全,原因是由于其它有table ...
Javascript操作table,tr,td和表格CSS样式设置小常识
效果良好的表属性设置: <table cellSpacing="0" cellPadding="0" border='1' bordercolor=&qu ...
[Eclipse]GEF入门系列（七、XYLayout和展开/折叠功能）
前面的帖子里曾说过如何使用布局,当时主要集中在ToolbarLayout和FlowLayout(统称OrderedLayout),还有很多应用程序使用的是可以自由拖动子图形的布局,在GEF里称为XYL ...
可展开/折叠的Android TextView：ExpandableTextView
可展开/折叠的Android TextView:ExpandableTextView
CSS 实现超过固定高度后出现展开折叠按钮
在平时开发中,经常会碰到一些需要判断高度的场景,比如当超过一定高度后,需要自动出现展开折叠按钮,如下传统的思路肯定是通过JS去动态计算容器的高度,但这样就涉及到加载时机的问题,获取早了可能元素还没渲 ...

javascript 实现table展开折叠

javascript 实现table展开折叠相关推荐

最新文章

热门文章