Heim  >  Artikel  >  Web-Frontend  >  jquery 固定列。怎么用% 随浏览器大小 导航条显示出来,看图不用datagrid_html/css_WEB-ITnose

jquery 固定列。怎么用% 随浏览器大小 导航条显示出来,看图不用datagrid_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:52:38967Durchsuche


nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


     new document 
    
    
    
    
<script></script>
<script> <br /> <!-- <br /> function FixTable(TableID, FixColumnNumber, width, height) { <br /> /// <summary> <br /> /// 锁定表头和列 <br /> /// <para> sorex.cnblogs.com <br /> /// <br /> /// <param name="TableID" type="String"> <br /> /// 要锁定的Table的ID <br /> /// <br /> /// <param name="FixColumnNumber" type="Number"> <br /> /// 要锁定列的个数 <br /> /// <br /> /// <param name="width" type="Number"> <br /> /// 显示的宽度 <br /> /// <br /> /// <param name="height" type="Number"> <br /> /// 显示的高度 <br /> /// <br /> if ($("#" + TableID + "_tableLayout").length != 0) { <br /> $("#" + TableID + "_tableLayout").before($("#" + TableID)); <br /> $("#" + TableID + "_tableLayout").empty(); <br /> } <br /> else { <br /> $("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'>"); <br /> } <br /> $( <br /> <!-- + '<div id="' + TableID + '_tableHead">'--> <br /> '<div id="' + TableID + '_tableColumn">' <br /> + '<div id="' + TableID + '_tableData">').appendTo("#" + TableID + "_tableLayout"); <br /> var oldtable = $("#" + TableID); <br /> var tableFixClone = oldtable.clone(true); <br /> tableFixClone.attr("id", TableID + "_tableFixClone"); <br /> <!-- $("#" + TableID + "_tableFix").append(tableFixClone);--> <br /> var tableHeadClone = oldtable.clone(true); <br /> tableHeadClone.attr("id", TableID + "_tableHeadClone"); <br /> <!--$("#" + TableID + "_tableHead").append(tableHeadClone);--> <br /> var tableColumnClone = oldtable.clone(true); <br /> tableColumnClone.attr("id", TableID + "_tableColumnClone"); <br /> $("#" + TableID + "_tableColumn").append(tableColumnClone); <br /> $("#" + TableID + "_tableData").append(oldtable); <br /> $("#" + TableID + "_tableLayout table").each(function () { <br /> $(this).css("margin", "0"); <br /> }); <br /> <!--var HeadHeight = $("#" + TableID + "_tableHead thead").height();--> <br /> <!--HeadHeight += 2;--> <br /> <!--$("#" + TableID + "_tableHead").css("height", HeadHeight)-->; <br /> <!--$("#" + TableID + "_tableFix").css("height", HeadHeight);--> <br /> var ColumnsWidth = 0; <br /> var ColumnsNumber = 0; <br /> $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () { <br /> ColumnsWidth += $(this).outerWidth(true); <br /> ColumnsNumber++; <br /> }); <br /> ColumnsWidth += 2; <br /> if ($.browser.msie) { <br /> switch ($.browser.version) { <br /> case "7.0": <br /> if (ColumnsNumber >= 3) ColumnsWidth--; <br /> break; <br /> case "8.0": <br /> if (ColumnsNumber >= 2) ColumnsWidth--; <br /> break; <br /> } <br /> } <br /> $("#" + TableID + "_tableColumn").css("width", ColumnsWidth); <br /> <!-- $("#" + TableID + "_tableFix").css("width", ColumnsWidth);--> <br /> $("#" + TableID + "_tableData").scroll(function () { <br /> <!-- $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());--> <br /> $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop()); <br /> }); <br /> <!-- $("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" });--> <br /> <!-- $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });--> <br /> $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" }); <br /> $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" }); <br /> if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) { <br /> $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height()); <br /> $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17); <br /> } <br /> $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset()); <br /> $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset()); <br /> } <br /> $(document).ready(function () { <br /> FixTable("MyTable", 2, 600, 400); <br /> }); <br /> //--> <br /> </script>


鸣谢原文转自


http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html


    style="border-bottom-color: black; border-top-color: black; width: 1000px; color: #000000; border-right-color: black; font-size: medium; border-left-color: black"
    id="MyTable"
    border="1"
    cellspacing="0"
    cellpadding="0"
>

    
        
            姓名
        
        
            班级
        
        
            成绩
        
    
    
        
            主科
        
        
            文科
        
        
            理科
        
        
            总分
        
        
    
        
            语文
        
        
            数学
        
        
            英语
        
        
            政治
        
        
            历史
        
        
            地理
        
        
            物理
        
        
            化学
        
        
            生物
        
    
    
        
            
                学生32
            
            
                班级1
            
            
                29
            
            
                25
            
            
                146
            
            
                28
            
            
                79
            
            
                73
            
            
                47
            
            
                8
            
            
                91
            
            
                526
            
        
    



浏览器大时候:

浏览器小时候:

各位请支个招,分管够。谢谢。


回复讨论(解决方案)

大家有好的方法。。发邮箱 245322563@qq.com谢谢

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn