<html>
<head>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#table1 tr td span').each(function() {
var text = $(this).text();
$(this).find('input:checkbox').click(function(){
var falg = $(this).attr('checked');
if (falg =='checked'||falg==true ) {
change(0, text);
}else{
change(1, text);
}
})
});
})
function change(reg, text){
var index;
$("#table2 tr").each(function(i){
if(i==0){
$(this).find('td').each(function(){
var text2 = $(this).text();
if(text2.indexOf(text)>=0){
index = $(this).index();
}
})
}
if(reg==0){
$(this).find("td:eq("+index+")").hide();
}else if(reg==1){
$(this).find("td:eq("+index+")").show();
}
})
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="h_lie" id="table1">
<!--列开始-->
<tr>
<td>
<span><input type="checkbox" class="checkbox_but" />第一列</span>
<span><input type="checkbox" class="checkbox_but" />第二列</span>
<span><input type="checkbox" class="checkbox_but" />第三列</span>
<span><input type="checkbox" class="checkbox_but" />第四列</span>
<span><input type="checkbox" class="checkbox_but" />第五列</span>
</td>
</tr>
<!--列结束-->
</table>
<table id="table2" border="1" cellpadding="0"
cellspacing="0" bordercolor="#a3b0dc" style="border-collapse:collapse;" >
<tr >
<td width="200">第一列</td>
<td width="200">第二列</td>
<td width="200">第三列</td>
<td width="200">第四列</td>
<td width="200">第五列</td>
</tr>
<tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>
<tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>
<tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>
<tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>
<tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>
</table>
</body>
</html>
第一页隐藏第二页也隐藏
| sh_table | 隐藏列表checkbox |
| hideIndex | 保存的隐藏列ID |
| changecolor | 列 |
var hideIndex = $('#hideIndex' ).val();
if(hideIndex!= null && hideIndex!='' ){
$( '#sh_table').show();
}else{
$( '#sh_table').hide();
}
$('#sh_table tr td span').each( function(i) {
var text = $(this).text();
$( this).find('input:checkbox' ).click(function(){
var falg = $(this).attr('checked');
if (falg =='checked' ||falg==true ) {
change(1, text);
var hideIndexVal = $('#hideIndex').val();
if(hideIndexVal!=null && hideIndexVal!=''){
var indexArray = hideIndexVal.split("," );
$.grep(indexArray, function(val,key){
if(val==i){
indexArray.remove(key);
}
});
}
$( '#hideIndex').val(indexArray.toString());
} else{
change(0, text);
var colorArray=new Array();
var hideIndexVal = $('#hideIndex').val();
if(hideIndexVal!=null && hideIndexVal!=''){
colorArray.push(hideIndexVal);
}
colorArray.push(i);
$( '#hideIndex').val(colorArray.toString());
}
});
});
$('#sh_table tr td span').each( function(i) {
var text = $(this).text();
// var hideIndex = $('#hideIndex'). val();
// var index = hideIndex.split(",");
// 判断服务器返回需要隐藏某些值
$( this).find('input:checkbox' ).each(function(){
if(hideIndex.indexOf(i)>=0){
$( this).removeAttr('checked' );
};
});
$( this).find('input:checkbox' ).each(function(){
var falg = $(this).attr('checked');
if (falg =='checked' ||falg==true ) {
change(1, text);
} else{
change(0, text);
};
});
});
//删除
Array.prototype.remove = function (dx) {
if (isNaN(dx) || dx > this.length) {
return false ;
}
for ( var i = 0, n = 0; i < this.length; i++) {
if (this [i] != this[dx]) {
this[n++] = this [i];
}
}
this.length -= 1;
};
//隐藏列
function change(reg, text){
var index;
$("#changecolor tr").each( function(i){
if(i==0){
$( this).find('th' ).each(function(){
var text2 = $(this).text();
if(text2.indexOf(text)>=0){
index = $( this).index();
};
});
}
if(reg==0){
$( this).find("th:eq(" +index+")" ).hide();
$( this).find("td:eq(" +index+")" ).hide();
} else if (reg==1){
$( this).find("th:eq(" +index+")" ).show();
$( this).find("td:eq(" +index+")" ).show();
}
});
}
