表格折叠展开其实质就是列的隐藏和显示，用JQuery很容易实现这个。
折叠展开的效果如下两图
源码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>表格列显示隐藏</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
body{ font-size:12px;}
.iup{ background-color:#eee;}
#table1{ background-color:#333;}
#table1 td{ background-color:#fff;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#showbtn").toggle(
function () {
$('.iup').hide();
$(this).val('显示');
},
function () {
$('.iup').show();
$(this).val('隐藏');
}
);
})
</script>
</head>
<body align='center'>
<center>
<input type='button' value='隐藏' id='showbtn' />
<br/>
<table id='table1' cellspacing='1'>
<tr>
<td width='150'>第一格</td>
<td width='250' class='iup'><input type='text'/></td>
<td width='150'>第三格</td>
</tr>
<tr>
<td width='150'>第一格</td>
<td width='250' class='iup'><input type='text'/></td>
<td width='150'>第三格</td>
</tr>
<tr>
<td width='150'>第一格</td>
<td width='250' class='iup'><input type='text'/></td>
<td width='150'>第三格</td>
</tr>
<tr>
<td width='150'>第一格</td>
<td width='250' class='iup'><input type='text'/></td>
<td width='150'>第三格</td>
</tr>
<tr>
<td width='150'>第一格</td>
<td width='250' class='iup'><input type='text'/></td>
<td width='150'>第三格</td>
</tr>
<tr>
<td width='150'>第一格</td>
<td width='250' class='iup'><input type='text'/></td>
<td width='150'>第三格</td>
</tr> <tr>
<td width='150'>第一格</td>
<td width='250' class='iup'><input type='text'/></td>
<td width='150'>第三格</td>
</tr>
</table>
</center>
</body>
</html>
611
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
