jsp页面固定table头

发布时间：2020-07-13 01:07:31 作者：小浩51
来源：网络阅读：587

页面直接调用：

 
jQuery.fn.CloneTableHeader = function(tableId, tableParentDivId) {  
    var obj = document.getElementById("tableHeaderDiv" + tableId);  
    if (obj) {  
        jQuery(obj).remove();  
    }  
    var browserName = navigator.appName;  
    var ver = navigator.appVersion;  
    var browserVersion = parseFloat(ver.substring(ver.indexOf("MSIE") + 5, ver.lastIndexOf("Windows")));  
    var content = document.getElementById(tableParentDivId);  
    var scrollWidth = content.offsetWidth - content.clientWidth;  
 
    var tableOrg = jQuery("#" + tableId)  
    var table = tableOrg.clone();  
 
    table.attr("id", "cloneTable");  
    var tableClone = jQuery(tableOrg).find("tr").each(function() {  
 
    });  
    var tableHeader = jQuery(tableOrg).find("thead");  
    var tableHeaderHeight = tableHeader.height();  
    tableHeader.hide();  
    var colsWidths = jQuery(tableOrg).find("tbody tr:first td").map(function() {  
        return jQuery(this).width();  
    });  
    var tableCloneCols = jQuery(table).find("thead tr:first td")  
    if (colsWidths.size() > 0) {  
        for (i = 0; i < tableCloneCols.size(); i++) {  
            if (i == tableCloneCols.size() - 1) {  
                if (browserVersion == 8.0)  
                    tableCloneCols.eq(i).width(colsWidths[i] + scrollWidth);  
                else 
                    tableCloneCols.eq(i).width(colsWidths[i]);  
            } else {  
                tableCloneCols.eq(i).width(colsWidths[i]);  
            }  
        }  
    }  
 
    var headerDiv = document.createElement("div");  
    headerDiv.appendChild(table[0]);  
    jQuery(headerDiv).css("height", tableHeaderHeight);  
    jQuery(headerDiv).css("overflow", "hidden");  
    jQuery(headerDiv).css("z-index", "20");  
    jQuery(headerDiv).css("width", "100%");  
    jQuery(headerDiv).attr("id", "tableHeaderDiv" + tableId);  
    jQuery(headerDiv).insertBefore(tableOrg.parent());  
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
 
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script> 
 
    <script src="CloneTableHeader.js" type="text/javascript"></script> 
 
    <style type="text/css"> 
        .itemList  
        {  
            border: solid 1px #cccccc;  
            overflow: hidden;  
            width: 100%;  
            border-collapse: collapse;  
        }  
        .itemList td  
        {  
            padding: 0px 0px 0px 0px;  
            color: #444444;  
            border: solid 1px #cccccc;  
            text-align: center;  
            line-height: 20px;  
        }  
        .selected  
        {  
            background-color: #fdee88;  
        }  
        .hovertr  
        {  
            background-color: #fff8c7;  
        }  
        .errortd  
        {  
            border: dashed 1px red;  
        }  
    </style> 
    <script type="text/javascript"> 
        jQuery(function() {  
            jQuery.fn.CloneTableHeader("tab1", "div1");  
        });  
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div style=" height: 100px; overflow:scroll;" id="div1"> 
        <table cellpadding="0" id="tab1" cellspacing="0" border="0" class="itemList"> 
            <thead> 
                <tr style="background-color: #eeeeee; margin: 0px; line-height: 20px; font-weight: bold;  
                    padding: 0px 0px 0px 0px;"> 
                    <td> 
                        编号  
                    </td> 
                    <td> 
                        姓名  
                    </td> 
                    <td> 
                        年龄  
                    </td> 
                    <td> 
                        城市  
                    </td> 
                </tr> 
                <tr style="background-color: #eeeeee; margin: 0px; line-height: 20px; font-weight: bold;  
                    padding: 0px 0px 0px 0px;"> 
                    <td colspan="2">身高</td> 
                    <td colspan="2">体重</td> 
                </tr> 
            </thead> 
            <tbody> 
                <tr> 
                    <td> 
                        1  
                    </td> 
                    <td> 
                        张三1  
                    </td> 
                    <td> 
                        22  
                    </td> 
                    <td> 
                        北京  
                    </td> 
                </tr> 
                <tr> 
                    <td colspan="2">170</td> 
                    <td colspan="2">99</td> 
                </tr> 
                <tr> 
                    <td> 
                        1  
                    </td> 
                    <td> 
                        张三1  
                    </td> 
                    <td> 
                        22  
                    </td> 
                    <td> 
                        北京  
                    </td> 
                </tr> 
                <tr> 
                    <td colspan="2">170</td> 
                    <td colspan="2">99</td> 
                </tr> 
                <tr> 
                    <td> 
                        1  
                    </td> 
                    <td> 
                        张三1  
                    </td> 
                    <td> 
                        22  
                    </td> 
                    <td> 
                        北京  
                    </td> 
                </tr> 
                <tr> 
                    <td colspan="2">170</td> 
                    <td colspan="2">99</td> 
                </tr> 
                <tr> 
                    <td> 
                        1  
                    </td> 
                    <td> 
                        张三1  
                    </td> 
                    <td> 
                        22  
                    </td> 
                    <td> 
                        北京  
                    </td> 
                </tr> 
                <tr> 
                    <td colspan="2">170</td> 
                    <td colspan="2">99</td> 
                </tr> 
                <tr> 
                    <td> 
                        1  
                    </td> 
                    <td> 
                        张三1  
                    </td> 
                    <td> 
                        22  
                    </td> 
                    <td> 
                        北京  
                    </td> 
                </tr> 
                <tr> 
                    <td colspan="2">170</td> 
                    <td colspan="2">99</td> 
                </tr> 
                <tr> 
                    <td> 
                        1  
                    </td> 
                    <td> 
                        张三1  
                    </td> 
                    <td> 
                        22  
                    </td> 
                    <td> 
                        北京  
                    </td> 
                </tr> 
                <tr> 
                    <td colspan="2">170</td> 
                    <td colspan="2">99</td> 
                </tr> 
                <tr> 
                    <td> 
                        1  
                    </td> 
                    <td> 
                        张三1  
                    </td> 
                    <td> 
                        22  
                    </td> 
                    <td> 
                        北京  
                    </td> 
                </tr> 
                <tr> 
                    <td colspan="2">170</td> 
                    <td colspan="2">99</td> 
                </tr> 
                <tr> 
                    <td> 
                        1  
                    </td> 
                    <td> 
                        张三1  
                    </td> 
                    <td> 
                        22  
                    </td> 
                    <td> 
                        北京  
                    </td> 
                </tr> 
                <tr> 
                    <td colspan="2">170</td> 
                    <td colspan="2">99</td> 
                </tr> 
                <tr> 
                    <td> 
                        1  
                    </td> 
                    <td> 
                        张三1  
                    </td> 
                    <td> 
                        22  
                    </td> 
                    <td> 
                        北京  
                    </td> 
                </tr> 
                <tr> 
                    <td colspan="2">170</td> 
                    <td colspan="2">99</td> 
                </tr> 
                <tr> 
                    <td> 
                        1  
                    </td> 
                    <td> 
                        张三1  
                    </td> 
                    <td> 
                        22  
                    </td> 
                    <td> 
                        北京  
                    </td> 
                </tr> 
                <tr> 
                    <td colspan="2">170</td> 
                    <td colspan="2">99</td> 
                </tr> 
                <tr> 
                    <td> 
                        1  
                    </td> 
                    <td> 
                        张三1  
                    </td> 
                    <td> 
                        22  
                    </td> 
                    <td> 
                        北京  
                    </td> 
                </tr> 
                <tr> 
                    <td colspan="2">170</td> 
                    <td colspan="2">99</td> 
                </tr> 
            </tbody> 
        </table> 
    </div> 
    </form> 
</body> 
</html>

jsp页面固定table头

相关阅读