当前位置：移动技术网 > IT编程>开发语言>JavaScript > jQuery实现表头固定效果的实例代码

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

2018年11月16日 | 移动技术网IT编程 | 我要评论

一、新建一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") + 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("p");

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" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

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

.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>

jquery(function() {

jquery.fn.clonetableheader("tab1", "p1");

});

</script>

</head>

<body>

<thead>

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

padding: 0px 0px 0px 0px;">

<td>

列1

</td>

<td>

列2

</td>

<td>

列3

</td>

<td>

列4

</td>

</tr>

</thead>

<tbody>

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

</tbody>

</table>

</p>

</form>

</body>

</html>

注意：记得引入jquery类库文件。

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

如何将一个现有的Vue网页项目封装成electron桌面应用

简介需求缘由基础步骤总结参考内容需求缘由开发了很久的网页项目，领导突然想变成桌面应用，又要重写代码？no，no，... [阅读全文]
荐《Webpack》彻底入门Webpack

前言前端发展到今天已经从当初简单的几个网页发展到更多的是把网页视为WebApp的模式，当业务逻辑复杂到一定程度的... [阅读全文]
前端网页--H5--海贼王动态网页源码

昨天写了一个草帽海贼团的动态网页，用的是原生JS写的，个人感觉网页的风格还是挺不错的。网页采用了fullpage... [阅读全文]
JavaWeb -- Json & jQuery

JsonJson 又称 JavaScript 对象表示法，键和值都要用双引号包裹（当 value 是数字时可以不... [阅读全文]
09.vue-charp-09 Render函数

本文章向大家介绍09.vue-charp-09 Render函数，主要包括09.vue-charp-09 Ren... [阅读全文]
uni-app里的pages.json页面配置

1.globalstyle是全局配置。pages数组里是单个页面的配置。页面级的配置会将全局覆盖掉。所以，在gl... [阅读全文]
二维码生成库

qrcodeQRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签... [阅读全文]
javascript知识巩固------创建对象的三种方式

1.利用new Object( )创建对象var obj1 = new Object(); 2.利用对象字面量创... [阅读全文]
在Vue中使用echarts，简单使用，组件化使用分析

在Vue中使用echarts安装版本依赖使用使用 -（全局引入）使用-（按需引入）在项目中不可避免的需要对数据进... [阅读全文]
day26 - jQuery

jQuery是js的一个库库：就是封装好一个js文件，里面有很多js常用的操作，封装成了一些使用起来比较简单，... [阅读全文]

网友评论


验证码：

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

2018年11月16日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论