JavaScript教程:Table行定位效果

小曲挺坚硬

小曲挺坚硬

2016-02-20 00:58

下面图老师小编跟大家分享一个简单易学的JavaScript教程:Table行定位效果教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

近来有客户要求用table显示一大串数据,由于滚动后就看不到表头,很不方便,所以想到这个效果。上次做 table排序 对table有了一些了解,这次更是深入了解了一番,发现table原来是这么不简单。

还不清楚这个效果叫什么,有点像表头固定的效果,就叫行定位吧,本来想把列定位也做出来,但暂时还没这个需求,等以后有时间再弄吧。
在 淘宝的商品搜索页 也看到类似的效果,但淘宝的不是table,而是li,而我这个是用在table上的。

要说明一下的是,我这个效果是用在一些普通的产品列表,当数据比较多时提高用户体验,而不是单单做数据显示,跟excel那样的方式是不同的。

效果预览

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

为方便预览,建议缩小浏览器。

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

注意,使用ie8的兼容性视图会有偏移。

程序原理

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

一开始的需求只是表头部分在滚动时能一直固定在头部,那关键要实现的就是让tr能定位。首先想到的方法是给tr设置relative,用ie6/7测试以下代码:

!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"
body
table cellpadding="5" cellspacing="0" border="1" width="100"
    tr style="position:relative; left:100px;"
        td1/td
        td2/td
    /tr
    tr
        td3/td
        td4/td
    /tr
/table
/body
/html

给tr设置relative后就能相对table定位了,看来很简单啊,但问题是这个方法ie8和ff都无效,而且存在很多问题,所以很快就被抛弃了。
ps:该效果用来做tr的拖动会很方便。

接着想到的是给table插入一个新tr,克隆原来的tr,并设置这个tr为fixed(ie6为absolute),例如:

!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"
body
table cellpadding="5" cellspacing="0" border="1" width="100"
    tr style="position:fixed; left:100px;"
        td1/td
        td2/td
    /tr
    tr style="position:absolute; left:200px;"
        td3/td
        td4/td
    /tr
    tr
        td5/td
        td6/td
    /tr
/table
/body
/html

第一个问题是fixed的tr在ie7中不能进行定位,而且td在定位后并不能保持在表格中的布局,这样在原表格插tr就没意义了。
ps:fixed的相关应用可参考仿LightBox效果。

最后我用的方法是新建一个table,并把源tr克隆到新table中,然后通过对新table定位来实现效果。用这个方法关键有两点,首先要做一个仿真度尽可能高的tr,还有是要准确的定位,这些请看后面的程序说明。

展开更多 50%)
分享

猜你喜欢

JavaScript教程:Table行定位效果

Web开发
JavaScript教程:Table行定位效果

JavaScript教程:网页浮动定位提示效果

Web开发
JavaScript教程:网页浮动定位提示效果

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

javascript操作table

Web开发
javascript操作table

table 行转列的sql详解

编程语言 网络编程
table 行转列的sql详解

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

使用 JavaScript 获取 table 行号和列号

Web开发
使用 JavaScript 获取 table 行号和列号

css应用:单击table使点击的行变色

Web开发
css应用:单击table使点击的行变色

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

JS教程:lightbox源码解析

JS教程:lightbox源码解析

win10手机预览版出现错误代码80073cf6怎么办?

win10手机预览版出现错误代码80073cf6怎么办?
下拉加载更多内容 ↓