jQuery 动态显示、隐藏列
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.1.3.pack.js"></script>
<style type="text/css">
body
{
font: normal 11px auto "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
}
a
{
color: #c75f3e;
}
#mytable
{
width: 700px;
padding: 0;
margin: 0;
}
caption
{
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
th
{
font: bold 11px "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA no-repeat;
}
th.nobg
{
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
td
{
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size: 11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
td.alt
{
background: #F5FAFA;
color: #797268;
}
th.spec
{
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff no-repeat;
font: bold 10px "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
}
th.specalt
{
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa no-repeat;
font: bold 10px "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
/*---------for IE 5.x bug*/
html > body td
{
font-size: 11px;
}
body, td, th
{
font-family: 宋体, Arial;
font-size: 12px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#tbGridView>thead>tr th").each(function(iIndex) {
$(this).bind("click", function() {
var GridViewIndex = iIndex + 1;
$("#tbGridView td:nth-child(" + GridViewIndex + "), #tbGridView th:nth-child(" + GridViewIndex + ")").toggle();
});
});
});
</script>
</head>
<body>
<table id="tbGridView">
<thead>
<tr>
<th scope="col">姓名</th>
<th scope="col">年龄</th>
<th scope="col">职位</th>
<th scope="col">地址</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td >赵一</td>
<td >23</td>
<td >.Net开发工程师</td>
<td >北京朝阳</td>
<td >工作三年</td>
</tr>
<tr>
<td >钱二</td>
<td >30</td>
<td >.Net开发工程师</td>
<td >北京朝阳</td>
<td >工作三年</td>
</tr>
<tr>
<td >孙三</td>
<td >26</td>
<td >C开发工程师</td>
<td >北京通州</td>
<td >工作二年</td>
</tr>
<tr>
<td >李四</td>
<td >25</td>
<td >Java开发工程师</td>
<td >北京海淀</td>
<td >工作四年</td>
</tr>
</tbody>
</table>
</body>
</html>
