JavaScript教程:Table行定位效果


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

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

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

效果预览

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

运行代码框

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

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

程序原理

一开始的需求只是表头部分在滚动时能一直固定在头部,那关键要实现的就是让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;">
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</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;">
        <td>1</td>
        <td>2</td>
    </tr>
    <tr style="position:absolute; left:200px;">
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
    </tr>
</table>
</body>
</html>

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

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



相关阅读:
拆分自然数:纯while实现 (Part 1 - 思路)
javascript 网站常用的iframe分割
PHP+javascript模拟Matrix画面
bc1998录制的css视频教程推荐新手看下
SQL Server 数据库自动执行管理任务
Cookie 小记
Linux系统开防火墙时自动开启相对应端口
让Firefox未载入图片显示边框
基于DDS的Oracle灾备方案(2)
Linux系统环境下双机/多机自动互备份方案
javascript题目,重写函数让其无限相加
vbscript和javascript版的15位, 18位的身份证号码的验证函数.以及根据身份证取省份,生日,性别
Access 2007 选项卡式文档
实现页面中按钮刷新的N种方法
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 “APP反腐”是反四风的“侦察兵” 我喜欢的小动物——蚕 单位领导结婚祝福语 散文诗“雨” 打针我没哭 今年的我要飞翔 关于描写小河的小学生作文_家乡的小河 大学生村官工作总结 转调二郎神(思归寄柳州) 雷锋纪录片观后感 狗狗的烦恼 父母生日祝语 Liuyq1,非你不爱。 倡导低碳人人有责(与地球共同呼吸)作文900字 浪漫*十二月~(招人啦~)作文1100字 吹七彩泡泡 记忆碎片—日出 暑期汽车美容实习体会范文 想象作文20年后的我 美丽的清风湖作文350字 我家的鹦鹉作文250字 品 雨350字 小学三年级作文700字:日记二则 上海80后旅客服务班组急旅客所急 雷锋语录,我愿永远做一个螺丝钉。 聚作文100字 制作教师节卡片 幼儿园植树节活动方案2014 城市规划专业建设管理实习报告 高一作文:天上有朵水做的云作文600字 令我最难忘的一件事300字 朗朗:与钢琴大师克莱德曼握手 对建设领域工程款拖欠问题的思考 小学五年级作文400字:秋季运动会 带着梦想扬帆起航作文 初中初一作文650字:冷气机和扇子 拒绝战争的作文 乡镇2013年度机关内务管理制度 伟大的老师您辛苦了350字 党外人士座谈会上的主持词 叙事作文评语_小学生作文评语 小学童话作文《青蛙谋生》 出海捕鱼记 波斯猫找快乐 2014上半年营销工作总结范文 公文格式标准化的特点 关于民商法学的读书笔记 踢蜡烛的女孩 主动联系一个人,有多难? 春天在那里100字

Copyright © 2016 phpStudy |