我们经常看到如下的页面，页面中有很多的数据项。我们可能只关注某些项，这时候我们就需要部分列显示的效果了。
部分显示与隐藏的设计思路：
1. 对tr的每一项中都放置一个<input type=”checkbox”/> 并设置一个相同的name,如list(方便取值)。
2.并设置checkbox的value值，并使value的值等于所在的列的值。
3.当用户点击隐藏选择的列时，通过jquery取得checkbox中的value,将其所对应的列（标题与内容）用 hide函数进行隐藏。
4.当用户点击全部显示的时候，将checked==”checked”的项显示出来，并清空checked标志。
示例代码：用的 jquery-1.11.3 只需所利用的jquery库名字即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.listTable tr{
text-align: center;
}
</style>
<script type="text/javascript" src="jquery-1.11.3.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("input[name='list']:checked").each(function() {
var index = null;
if (true == $(this).prop("checked")) {
index = $(this).prop('value');
console.log($(this).prop('value'));
}
var strth = ".listTable tr th:nth-child("
var strtd = ".listTable tr td:nth-child("
$(strtd+index+")").hide();
$(strth+index+")").hide();
})});
$("#show").click(function(){
$("input[name='list']:checked").each(function() {
var index = $(this).prop('value');
var strth = ".listTable tr th:nth-child("
var strtd = ".listTable tr td:nth-child("
$(strtd+index+")").show();
$(strth+index+")").show();
$(this).prop("checked",false);//清除checked标记
})});
// $(".listTable tr th:nth-child(1)").toggle();
//$(".listTable tr td:nth-child(1)").toggle(); //设置为0表示不用动画 ，1000就1秒的时间来展示或者隐藏
});
</script>
</head>
<body>
<input id="hide" type="button" value="隐藏所选择的列" />
<input id="show" type="button" value="显示所有的列" />
<table class="listTable" width="100%" border="0" cellpadding="0" cellspacing="1">
<tbody>
<tr>
<th width="3%"><input type="checkbox" id="selectAllOrNoneBtn" name="list" value="1" οnclick="listSelectAllOrNone(this,'id');"></th>
<th width="5%">序号<input type="checkbox" name="list" value="2"/></th>
<th width="10%">机构名称<input type="checkbox" name="list" value="3"/></th>
<th width="6%">员工姓名<input type="checkbox" name="list" value="4"/></th>
<th width="6%">班次名称<input type="checkbox" name="list" value="5"/></th>
<th width="6%">上班排名<input type="checkbox" name="list" value="6"/></th>
<th width="10%">上班时间(最早打卡时间)<input type="checkbox" name="list" value="7"/></th>
<th width="6%">下班排名<input type="checkbox" name="list" value="8"/></th>
<th width="10%">下班时间(最晚打卡时间)<input type="checkbox" name="list" value="9"/></th>
<th width="6%">统计日期<input type="checkbox" name="list" value="10"/></th>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" οnclick="setSelectAllOrNoneBtn(this,'selectAllOrNoneBtn');" name="id"
value="1325">
</div>
</td>
<td>1</td>
<td>xxxxx（北京）有限公司</td>
<td>xxxxx</td>
<td>朝九晚五</td>
<td>无</td>
<td>/</td>
<td>无</td>
<td>/</td>
<td>2016-03-03</td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" οnclick="setSelectAllOrNoneBtn(this,'selectAllOrNoneBtn');" name="id"
value="1342">
</div>
</td>
<td>2</td>
<td>燕南xxx（北京）有限公司</td>
<td>王xxx</td>
<td>朝九晚五</td>
<td>无
</td>
<td>
/
</td>
<td>
无
</td>
<td>
/
</td>
<td>
2016-03-03
</td>
</tr>
</tbody>
</table>
</body>
</html>
版权声明：本文为u010003835原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。