单选按钮切换双表格

1、效果图

2、核心代码详解

document.getElementById('leibie').addEventListener('change',function(){
            	
            		 var gid = $.url(location.href).param('gid'),
                 	examId = $.url(location.href).param('examId'),
                 	examName = $.url(location.href).param('examName');
            		 var schId = zxCookie.getCookieActInfoValue('schId');
            		 
                     var leibie = $('#leibie input[name="radio"]:checked ').val();
                     
                     if(leibie == 10){
                    	 var xueke = $('#xueke').val();
                    	 document.getElementById("xuanke").style.display ='none';
                    	 document.getElementById("xingzheng").style.display ='block';
                    	 document.getElementById("DataTables_Table_0").style.display ='none';
                    	 document.getElementById("DataTables_Table_1").style.display ='inline-block';
                    	 
                    	 var schId = zxCookie.getCookieActInfoValue('schId');
                      	  
                         if( schId == null){
                             $('.rpt_grade_score_DetailGrid').html('<tr><td>没有导入学生选课表.</td></tr>');
                             return false;
                         } 
                         var url = "../../"+schId+"/rpt100/10012.do?gradeId=" + gid + "&examId=" + examId + "&xueke=" + xueke + "&leibie=" + leibie,
                             xlsUrl = '../../'+schId+'/rpt100/xls/10012.do?examName='+examName+'&gradeId=' + gid + '&examId=' + examId + '&xueke=' + xueke + "&leibie=" + leibie;
                         
                          $('.rpt_grade_score_DetailGrid').zxtable({
                              url: url,
                              // renderTo: '.rpt_cls_scoreAvg',
                              template: '#rpt_grade_score_DetailGrid',
                              exportURL: xlsUrl,
                              needDataTable: true,
                              orderby: [  [5, 'asc'] ],
                              fixedHeader: true,

                              callBack: function(){
                                  //收缩报表说明
                                  $($(window.parent.document).find('.rpt_summary')[0]).height(0);
                              }
                          });

                    	 
                    	 $(".toolbar").html('<b><a href="../../' + schId + '/rpt100/xls/10012.do?examName=' + examName + '&gradeId=' + gid + '&examId=' + examId + '&xueke=' + xueke + '&leibie=' + leibie + '" class="btn btn-success">导出[Excel] <i class="icon-upload-alt"></i></a></b>');
                    	 
                     }else if(leibie == 11){
                    	 var xueke = $('#xueke').val();
                    	 document.getElementById("xingzheng").style.display ='none';
                    	 document.getElementById("xuanke").style.display ='block';
                    	 document.getElementById("DataTables_Table_0").style.display ='inline-block';
                    	 document.getElementById("DataTables_Table_1").style.display ='none';
                    	 
                    	 if( schId == null){
                             $('.rpt_grade_score_DetailGrid1').html('<tr><td>没有导入学生选课表.</td></tr>');
                             return false;
                         } 
                         var url = "../../"+schId+"/rpt100/10012.do?gradeId=" + gid + "&examId=" + examId + "&xueke=" + xueke + "&leibie=" + leibie,
                             xlsUrl = '../../'+schId+'/rpt100/xls/10012.do?examName='+examName+'&gradeId=' + gid + '&examId=' + examId + '&xueke=' + xueke + "&leibie=" + leibie;
                        
                        $('.rpt_grade_score_DetailGrid1').zxtable({
                            url: url,
                            // renderTo: '.rpt_cls_scoreAvg',
                            template: '#rpt_grade_score_DetailGrid1',
                            exportURL: xlsUrl,
                            needDataTable: true,
                            orderby: [  [5, 'asc'] ],
                            fixedHeader: true,

                            callBack: function(){
                                //收缩报表说明
                                $($(window.parent.document).find('.rpt_summary')[0]).height(0);
                            }
                        });

                    	 $(".toolbar").html('<b><a href="../../' + schId + '/rpt100/xls/10012.do?examName=' + examName + '&gradeId=' + gid + '&examId=' + examId + '&xueke=' + xueke + '&leibie=' + leibie + '" class="btn btn-success">导出[Excel] <i class="icon-upload-alt"></i></a></b>');
                    	 
                     }           
            },false);

主要在于添加显示隐藏样式