隐藏表格中的各列
尤其是在后台管理的情况中，往往一个列表要显示的列会很多。鉴于浏览器的大小限制，和每个用户的关注点不同需要根据个人喜好来显示表格中的指定的列。于是写下下面的代码。
table.html
表格代码，里面是一个很宽很宽的表格。和一个按钮，这个按钮就是用来标记表格第一行的 “表头”。勾选表头所在列则该列show，反选表头则该列hide。道理就是这么个道理。下面是代码
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="table.js"></script>
<style type="text/css">
ul,li{padding:0; margin:0; list-style:none}
</style>
</head>
<body>
<button data-tableid='autoCol' class="shouCols" style="width:100px; float:right" >显示列</button>
<table border="1" id="autoCol" width="100%" cellpadding="0" cellspacing="0">
<tr>
<th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th><th>Header 5</th><th>Header 6</th><th>Header 7</th><th>Header 8</th><th>Header 9</th><th>Header 10</th><th>Header 11</th>
</tr>
<tr>
<td>td 1</td><td>td 2</td><td>td 3</td><td>td 4</td><td>td 5</td><td>td 6</td><td>td 7</td><td>td 8</td><td>td 9</td><td>td 10</td><td>td 11</td>
</tr>
<tr>
<td>td 1</td><td>td 2</td><td>td 3</td><td>td 4</td><td>td 5</td><td>td 6</td><td>td 7</td><td>td 8</td><td>td 9</td><td>td 10</td><td>td 11</td>
</tr>
<tr>
<td>td 1</td><td>td 2</td><td>td 3</td><td>td 4</td><td>td 5</td><td>td 6</td><td>td 7</td><td>td 8</td><td>td 9</td><td>td 10</td><td>td 11</td>
</tr>
<tr>
<td>td 1</td><td>td 2</td><td>td 3</td><td>td 4</td><td>td 5</td><td>td 6</td><td>td 7</td><td>td 8</td><td>td 9</td><td>td 10</td><td>td 11</td>
</tr>
<tr>
<td>td 1</td><td>td 2</td><td>td 3</td><td>td 4</td><td>td 5</td><td>td 6</td><td>td 7</td><td>td 8</td><td>td 9</td><td>td 10</td><td>td 11</td>
</tr>
<tr>
<td>td 1</td><td>td 2</td><td>td 3</td><td>td 4</td><td>td 5</td><td>td 6</td><td>td 7</td><td>td 8</td><td>td 9</td><td>td 10</td><td>td 11</td>
</tr>
</table>
</body>
</html>table.js
找到表格id ，把表格第一行的 th或者td 中的文字放到列表li中。每个checkbox都有一个onclick事件来操作显示和隐藏本列。然后写一个方法用来显示和隐藏指定的列。
$(document).ready(function(){
// 控制table列的显示与隐藏
var controlTableCol=$(".shouCols");
if(controlTableCol.length){
$(controlTableCol).hover(function(){
$(this).find("div").show();
},function(){
$(this).find("div").hide();
})
$(controlTableCol).each(function(){
var tableid = $(this).data("tableid");
$(this).css("position","relative")
var table = $("#"+tableid);
var thList = document.createElement("div");
thList.style.position = "absolute";
thList.style.background = "#ffffff";
thList.style.border = "1px solid #dedede";
thList.style.color = "#666666";
thList.style.textShadow = "none";
thList.style.fontWeight = "normal";
thList.style.width = "100%";
thList.style.left = "0%";
thList.style.top = "100%";
thList.style.textAlign = "left";
thList.style.paddingLeft = "10px";
thList.style.display = "none";
thList.style.zIndex = "999";
var ul = document.createElement("ul");
var tHead = $(table).find("tr:first").children();
$.each(tHead,function(){
var li = document.createElement("li");
li.innerHTML = "<label><input type='checkbox' onclick='hideCols(this)' checked/> "+$(this).text()+"</label>";
ul.append(li)
})
thList.append(ul)
$(this).append(thList)
});
}
});
// 控制table列的显示与隐藏 shouCols
function hideCols(checkbox){
var _index = $(checkbox).parents("li").index();
var tableId = $(checkbox).parents(".shouCols").data("tableid");
var table = $("#"+tableId);
if( $(checkbox).is(":checked")){
$(table).find("tr").each(function(){
$(this).children(":eq("+_index+")").show();
});
}else{
$(table).find("tr").each(function(){
$(this).children(":eq("+_index+")").hide();
});
}
}好了 看效果吧。下载链接
