您现在的位置是：首页 >

表头固定怎么设置 jQuery实现表头固定效果的实例代码

火烧 2023-01-31 23:31:36 1027

jQuery实现表头固定效果的实例代码　　一新建一j 文件jQuery_FixedTa leHead j 　　内容如下代码如下: jQuery f Clo eTa leHeader = fu c

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

　　一新建一js文件jQuery_FixedTableHead js

　　内容如下

代码如下: 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") + 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() > ) {

　　for (i = ; i < tableCloneCols size(); i++) {

　　if (i == tableCloneCols size() ) {

　　if (browserVersion == )

　　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[ ]);

　　jQuery(headerDiv) css("height" tableHeaderHeight);

　　jQuery(headerDiv) css("overflow" "hidden");

　　jQuery(headerDiv) css("z index" " ");

　　jQuery(headerDiv) css("width" " %");

　　jQuery(headerDiv) attr("id" "tableHeaderDiv" + tableId);

　　jQuery(headerDiv) insertBefore(tableOrg parent());

　　二 Html实例文件

　　内容如下

代码如下: <!DOCTYPE PUBLIC " //W C//DTD XHTML Transitional//EN" "

　　< xmlns="

　　<title>qubernet@ _jQuery实现表头固定效果（挺不错的！！！）</title>

　　 itemList

　　{

　　border: solid px #cccccc;

　　overflow: hidden;

　　width: %;

　　border collapse: collapse;

　　}

　　 itemList td

　　{

　　padding: px px px px;

　　color: # ;

　　border: solid px #cccccc;

　　text align: center;

　　line height: px;

　　}

　　</style>

　　jQuery(function() {

　　jQuery fn CloneTableHeader("tab " "div ");

　　});

　　</script>

　　</head>

　　<body>

　　<div >

　　<thead>

　　<tr style="background color: #eeeeee; margin: px; line height: px; font weight: bold;

　　padding: px px px px;">

　　<td>

　　列

　　</td>

　　<td>

　　列

　　</td>

　　<td>

　　列

　　</td>

　　<td>

　　列

　　</td>

　　</tr>

　　</thead>

　　<tbody>

　　<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>

　　</tbody>

　　</table>

　　</div>

　　</form>

　　</body>

　　</>

lishixinzhi/Article/program/Java/JSP/201311/20454

很赞哦！ (1027)

表头固定怎么设置 jQuery实现表头固定效果的实例代码

什么得归京邑孟浩然《书怀贻京邑同好》原文及翻译赏析

qq名称女生又萌又霸气男生扣扣昵称大全,男生扣扣昵称大全!

相关文章

表头固定怎么设置 jQuery实现表头固定效果的实例代码

什么得归京邑 孟浩然《书怀贻京邑同好》原文及翻译赏析

qq名称女生又萌又霸气 男生扣扣昵称大全,男生扣扣昵称大全!

相关文章

什么得归京邑孟浩然《书怀贻京邑同好》原文及翻译赏析

qq名称女生又萌又霸气男生扣扣昵称大全,男生扣扣昵称大全!