JavaScript Table行定位效果


-
一开始的需求只是表头部分在滚动时能一直固定在头部,那关键要实现的就是让tr能定位。 首先想到的方法是给tr设置relative,用ie6/7测试以下代码: Code <!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),例如: Code <!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,还有是要准确的定位,这些请看后面的程序说明。 程序说明 【克隆table】 克隆一个元素用cloneNode就可以了,它有一个bool参数,表示克隆是否包含子节点。 程序第一步就是克隆原table: this._oTable = $(table);//源table this._nTable = this._oTable.cloneNode(false);//新table this._nTable.id = "";//避免id冲突 要注意虽然ie的cloneNode参数是可选的(默认是false),但在ff是必须的,建议使用时都写上参数。 还要注意的是id属性也会被克隆,也就是克隆后会有两个相同id的元素(如果克隆对象有设置的话),这很容易会导致其他问题,程序会把克隆table的id属性设空。 ps:table请用class来绑定样式,用id的话新table就获取不了样式了。 克隆之后再设置样式: this._style.width = this._oTable.offsetWidth + "px"; this._style.position = isIE6 ? "absolute" : "fixed"; this._style.zIndex = 100; 一般来说offsetWidth是width+padding+border的结果,但table比较特别,测试下面的代码: Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra
-
2017-08-19
动态table怎么通过JS定位后来生成出来的行和指定的td_course
2019-08-17我现在有一张嵌套表,主表的某一行里面嵌套了一张动态表,我想请问一下怎么才能通过JS来定位到我指定的那一个td里面的input上面呢 (input标签有id,而且动态生成同一列的ID是相同的) -------------------------------------------------------------------  ------------------------------------------------------------------ 这是一个OA系统,我只能通过JS来添加一些功能,图里的是两个tr里面的同一列,id是相同的,我前端不太好,希望能有大神能指点我一下,万分感谢
一个有1000多行的表格, 怎样用js定位其中的特定行, 并将它显示在浏览器的当前窗口?_course
2008-03-25如题. 我的这个表格有1000多行, 浏览器窗口只能显示其中的一小部分, 我想当用户进行某个操作的时候窗口自动定位到特定的行, 并把那行醒目地显示出来, 而且这行我已经用遍历的方法找到了, 就是不知道
微信小程序样式开发入门
2019-01-07讲解微信小程序中样式的入门使用,如何使用传统的css知识点来开发wxss的样式;本节课主要讲解在微信小程序中创建样式的几种 写法,元素选择器的基础使用,id选择器和id派生选择器的使用,class类选择器的使用。
68B
JAVA上百实例源码以及开源项目
2016-01-03百度云盘分享 简介 笔者当初为了学习JAVA,收集了很多经典源码,源码难易程度分为初级、中级、高级等,详情看源码列表,需要的可以直接下载! 这些源码反映了那时那景笔者对未来的盲目,对代码的热情、执着,
爬虫微课5小时 Python学习路线
2018-07-10Python爬虫技术视频教程,该课程每堂课都有一个作业,包含的项目案例有家长帮142600条数据爬取与分析,全球天气数据抓取与分析,淘宝商品信息数据众数分析,12306余票查询,python软件打包exe与发布。学完此课程能让你对整个数据爬取数据分析有一个全新的了解,适当的深入则可以做这方面的工作
84.55MB
微信小程序源码-合集4.rar
2020-09-04微信小程序源码,包含:3C手机商城、kindle图书商城、大宅小屋拼团、球鞋商城、扫码购物、一元夺宝、喜茶店铺、京东首页、京东白条、小米商城等35个商城类源码。
13.41MB
jd_seckill京东抢茅台插件最新版【京东飞天茅台1499抢购】Python脚本的完整安装+使用教程
2021-02-04jd_seckill京东抢茅台插件最新版【京东飞天茅台1499抢购】Python脚本的完整安装+使用教程,这个很好用,稳定出单!
41.55MB
25个经典网站源代码
2013-06-0925个经典网站源代码 有简约的有时尚的方便大家参考、模仿。
4.4MB
敏捷开发V1.0.pptx
2020-07-01敏捷开发PPT 敏捷开发以用户的需求进化为核心,采用迭代、循序渐进的方法进行软件开发。在敏捷开发中,软件项目在构建初期被切分成多个子项目,各个子项目的成果都经过测试,具备可视、可集成和可运行使用的特征
41.5MB
java jdk 8 帮助文档 中文 文档 chm 谷歌翻译
2017-04-02JDK1.8 API 中文谷歌翻译版 java帮助文档 JDK API java 帮助文档 谷歌翻译 JDK1.8 API 中文 谷歌翻译版 java帮助文档 Java最新帮助文档 本帮助文档是使用谷
57.86MB
微信小程序源码-合集5.rar
2020-09-04微信小程序源码,包含:豆瓣、微信、论坛、停车、房贷计算、股票、蜗牛生活、物品回收、学车预约、住房装修、斗鱼直播、水利、快拍、同城等源码。
-
学院
xxljob源码分析
xxljob源码分析
-
学院
《文件和目录操作命令》<Linux核心命令系列Series> <2.>
《文件和目录操作命令》<Linux核心命令系列Series> <2.>
-
学院
【爱码农】C#制作MDI文本编辑器
【爱码农】C#制作MDI文本编辑器
-
下载
2014年重庆理工大学《软件项目管理》期末考试试卷.pdf
2014年重庆理工大学《软件项目管理》期末考试试卷.pdf
-
学院
MMM 集群部署实现 MySQL 高可用和读写分离
MMM 集群部署实现 MySQL 高可用和读写分离
-
博客
UVA839 天平 Not so Mobile
UVA839 天平 Not so Mobile
-
学院
MySQL 存储过程(创建海量数据实验环境)
MySQL 存储过程(创建海量数据实验环境)
-
博客
PD协议 协议层
PD协议 协议层
-
学院
VMware vSphere ESXi 7 精讲/VCSA/VSAN
VMware vSphere ESXi 7 精讲/VCSA/VSAN
-
下载
美迪凯首次公开发行股票并在科创板上市招股说明书.pdf
美迪凯首次公开发行股票并在科创板上市招股说明书.pdf
-
下载
罗普特首次公开发行股票并在科创板上市招股说明书.pdf
罗普特首次公开发行股票并在科创板上市招股说明书.pdf
-
博客
docker菜鸟学习笔记之ubuntu容器中安装python3和卸载python2
docker菜鸟学习笔记之ubuntu容器中安装python3和卸载python2
-
下载
音视频格式转换工具.rar
音视频格式转换工具.rar
-
学院
基于微信的同城小程序、校园二手交易小程序 毕业设计毕设源码使用教程
基于微信的同城小程序、校园二手交易小程序 毕业设计毕设源码使用教程
-
下载
2014年重庆理工大学《数据结构》两套期末考试试卷.pdf
2014年重庆理工大学《数据结构》两套期末考试试卷.pdf
-
博客
用研转岗规划——案例2则
用研转岗规划——案例2则
-
下载
DT开源博客第一版.mp4
DT开源博客第一版.mp4
-
博客
linux连接wifi
linux连接wifi
-
博客
12.2 布尔函数的表示
12.2 布尔函数的表示
-
学院
libFuzzer视频教程
libFuzzer视频教程
-
下载
FactoryTalk View StudioV10.0备份HMI步骤.docx
FactoryTalk View StudioV10.0备份HMI步骤.docx
-
博客
搭建ES Elasticsearch 集群
搭建ES Elasticsearch 集群
-
下载
必得科技首次公开发行股票招股说明书.pdf
必得科技首次公开发行股票招股说明书.pdf
-
下载
HW解决方案业务拓展指引.pptx
HW解决方案业务拓展指引.pptx
-
博客
SpringBoot 2.3.x整合Swagger3.x接口文档+Knife4jUI
SpringBoot 2.3.x整合Swagger3.x接口文档+Knife4jUI
-
学院
MySQL 四类管理日志(详解及高阶配置)
MySQL 四类管理日志(详解及高阶配置)
-
学院
Galera 高可用 MySQL 集群(PXC v5.6 + Ngin
Galera 高可用 MySQL 集群(PXC v5.6 + Ngin
-
下载
2014年重庆理工大学《信息资源组织与管理》两套期末考试试卷.pdf
2014年重庆理工大学《信息资源组织与管理》两套期末考试试卷.pdf
-
学院
朱老师鸿蒙系列课程第1期-3.鸿蒙系统Harmonyos源码配置和管理
朱老师鸿蒙系列课程第1期-3.鸿蒙系统Harmonyos源码配置和管理
-
博客
Tushare Day7—— 第19章投资组合理论及拓展
Tushare Day7—— 第19章投资组合理论及拓展