| <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(); |
| |
| |
| |
| $( 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(); |
| } |
| |
| }); |
| } |
