为Web页中的Table对象创建一个映射表

简介:

   HTML对象中的TABLE是我们常用的网页元素,在DHTML编程中,我们可以通过它的rows和cells方法方便的访问表格对象里面的每一个单元格,而且表格对象(table)的每个单元行(tr)和每个单元格(td)分别又有自己的rowIndex和cellIndex属性。

    使用上面提到的表格对象特性,当我们要在表格的横向或纵向浏览单元格的时候,似乎可以非常的简单,比如纵向浏览一个column里的单元格,我们只用:

< script  language ="javascript" >
function  BrowerColumn(tbl, col)
{
    
for  (  var  i = 0  ; i  <  tbl.rows.length ;  ++ i )
    
{
        
var  cell  =  tbl.rows(i).cells(col);
        
//  do something with cell
    }   
}

</ script >

就可以了,如果是横向浏览更加简单,只需要使用td的nextSibling和previousSibling属性就行了。

    说了半天,似乎还没有说到给TABLE建立什么映射的事情哦,上面说到的表格单元格浏览的情况确实是可行的,可是它却只能解决规则的表格对象,什么是规则的表格对象呢?就是说表格的每个单元格的colSpan和rowSpan必须都分别相同,当然默认的都是1了,否这纵向浏览将会crash

    我们知道表格里面合并单元格的方法是使用xxxSpan,然后在合并方向上的cell会根据合并的宽度被移去xxxSpan-1(xxxSpan>1)个。这都是我们清楚的(如果你不清楚,说明这篇文章不适合你阅读),可是在行上合并了以后,cell的cellIndex的值仍然是连续的,这就出问题了,像下面的这个表格单元格的每个cell的cellIndex居然成了这些值@_@:

   

    我们如果再使用文章开始那段代码去纵向浏览这个表格的单元格,那么将会死的很难看。于是我们可以先给表格创建一个cell到colCount*rowCount这样一个矩阵的映射,然后我们在那个二维矩阵中去浏览单元格就会非常简单,不管是纵向还是横向(不过横向浏览仍然建议使用xxxSibling属性)。建立的矩阵效果如图:

     
    这样我们就可以在这个tableMap上方便的纵向浏览了

    我们为什么要纵横浏览表格的单元格呀??当我们在做一些表格中的highlighting的时候,这是经常需要使用的方法,当然这个表格的纵横浏览还是我下面要说的'使用方向键在输入框矩阵中自然的导航'的基础。

    附表格单元格映射矩阵代码:

< script  language ="javascript" > </ script >

本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。

目录
相关文章
|
6月前
|
缓存 Java 数据库连接
《使用 Hibernate 进行 ORM 映射:简化 Java Web 开发的数据库操作》
【4月更文挑战第4天】Hibernate是Java Web开发中的ORM工具,通过将数据库表映射为Java对象简化数据库操作。它减少对SQL和底层数据库的依赖,自动化连接管理,提供缓存机制提升性能。Hibernate的优势包括直观的对象关系映射、透明持久化、灵活查询和关联关系管理。遵循合理设计映射、缓存使用、配置优化及性能测试的最佳实践,可提升开发效率和系统性能。
78 6
|
3月前
|
数据安全/隐私保护 开发者 Ruby
【深度揭秘】Rails高手都不说的秘密:玩转URL映射,让你的Web应用瞬间高大上!
【8月更文挑战第31天】Rails中的路由机制负责将HTTP请求映射到应用内部逻辑。本文通过问答形式,结合示例代码详细解释了路由的作用、定义及使用方法。在`config/routes.rb`中定义的`resources :articles`会自动生成CRUD操作所需的标准RESTful路由。此外,还介绍了如何自定义非标准路由以及命名路由的生成与使用,帮助开发者更灵活地管理URL与应用逻辑间的映射关系,提升Rails应用的健壮性和可维护性。
39 0
|
3月前
|
前端开发 开发者
new操作符背后的秘密:揭开Web前端对象创建的神秘面纱!
【8月更文挑战第23天】在Web前端开发中,`new`操作符是创建对象实例的核心。本文以`Person`构造函数为例,通过四个步骤解析`new`操作符的工作原理:创建空对象、设置新对象原型、执行构造函数并调整`this`指向、判断并返回最终对象。了解这些有助于开发者更好地理解对象实例化过程,从而编写出更规范、易维护的代码。
39 0
|
21天前
|
JavaScript 前端开发 Java
SpringBoot_web开发-webjars&静态资源映射规则
https://www.91chuli.com/ 举例:jquery前端框架
16 0
|
2月前
|
SQL 缓存 数据库
构建高效Web应用:掌握Python中的ORM映射技术
在Web开发中,数据库操作至关重要,但直接编写SQL语句会增加代码复杂度并降低效率。对象关系映射(ORM)技术通过将对象模型映射为数据库表,使开发者能以面向对象的方式处理数据,提升开发效率和代码可维护性。本文以Python和SQLAlchemy为例,介绍ORM的基本概念、安装方法及使用技巧,并展示其在提升Web应用性能方面的优势。通过ORM,开发者可以简化数据库操作,专注于业务逻辑实现,提高开发效率和代码质量。
51 1
|
3月前
|
XML JavaScript 测试技术
Web自动化测试框架(基础篇)--HTML页面元素和DOM对象
本文为Web自动化测试入门指南,介绍了HTML页面元素和DOM对象的基础知识,以及如何使用Python中的Selenium WebDriver进行元素定位、操作和等待机制,旨在帮助初学者理解Web自动化测试中的关键概念和操作技巧。
53 1
|
3月前
|
开发者 Java Spring
【绝技揭秘】掌握Vaadin数据绑定:一键同步Java对象,告别手动数据烦恼,轻松玩转Web应用开发!
【8月更文挑战第31天】Vaadin不仅是一个功能丰富的Java Web应用框架,还提供了强大的数据绑定机制,使开发者能轻松连接UI组件与后端Java对象,简化Web应用开发流程。本文通过创建一个简单的用户信息表单示例,详细介绍了如何使用Vaadin的`Binder`类实现数据绑定,包括字段与模型属性的双向绑定及数据验证。通过这个示例,开发者可以更专注于业务逻辑而非繁琐的数据同步工作,提高开发效率和应用可维护性。
84 0
|
4月前
|
开发框架 JSON 前端开发
利用查询条件对象,在Asp.net Web API中实现对业务数据的分页查询处理
利用查询条件对象,在Asp.net Web API中实现对业务数据的分页查询处理
|
4月前
|
SQL 缓存 数据库
构建高效Web应用:掌握Python中的ORM映射技术
【7月更文挑战第21天】在Web开发中,数据库操作常需直接写SQL,增加复杂度与风险。ORM技术,如SQLAlchemy,通过对象关系映射简化此流程,提升效率与安全性。安装SQLAlchemy仅需`pip install sqlalchemy`,使用时定义模型映射至数据库表,通过会话对象管理事务。ORM特性如缓存、延迟加载及批量操作显著优化Web性能,减少数据库负担。掌握SQLAlchemy,开发者可聚焦业务逻辑,提升应用效能与代码质量。
46 0
|
5月前
|
开发框架 .NET API
ASP.NET Core Web中使用AutoMapper进行对象映射
ASP.NET Core Web中使用AutoMapper进行对象映射