jQuery实现表头固定效果的实例代码

2020-05-24 21:29:30易采站长站整理


    }


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


}



二、Html实例文件


内容如下:



<!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>qubernet@163.com_jQuery实现表头固定效果(挺不错的!!!)</title>


 


    <script src=”jquery-1.3.2.min.js” type=”text/javascript”></script>


 


    <script src=”jQuery_FixedTableHead.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;


        }


    </style>


    <script type=”text/javascript”>