`
han2000lei
  • 浏览: 276054 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

javascript对table的DOM操作

阅读更多
一、Table对象
DOM继承关系:Node —— Element —— HTMLElement —— Table

1、Table对象的属性:
.rows
//返回一个数组,存放所有的行对象,即TableRow对象
除了这个属性之外,其它的就是<table>标记中的属性

2、Table对象的方法:
.insertRow( index ) //插入一行,返回新插入的TableRow对象
.deleteRow( index ) //删除一行

二、TableRow对象
DOM继承关系:Node —— Element —— HTMLElement —— TableRow

1、TableRow对象的属性:
.cells //返回存放所有单元格的数组,即元素是TableCell对象
.rowIndex //返回该行所在表中的位置
除了这两个属性外,其它的就是<tr>标记中的属性

2、TableRow的方法
.insertCell( index ) //在指定位置插入一个单元格,返回被插入的单元格(TableCell)对象
.deleteCell( index ) //删除一个单元格

三、TableCell对象
DOM继承关系:Node —— Element —— HTMLElement —— TableCell

1、TableCell对象的属性
.cellIndex //返回它在行中的位置
除了这个属性之外,其它的就是<td>标记中的属性

注:这三个对象除了本身所具有的属性和方法之外,还继承了它们的上面的三个父类的属性和方法,继承的这些属性和方法是DOM的核心,具体可查看我的文章http://han2000lei.iteye.com/admin/blogs/518083
分享到:
评论

相关推荐

    js_HTML_Dom操作练习

    8. **表格操作**:在HTML中,`&lt;table&gt;`元素及其子元素(`&lt;tr&gt;`, `&lt;td&gt;`, `&lt;th&gt;`等)可以通过DOM进行操作,例如,添加或删除行和单元格。 9. **表单操作**:DOM也允许我们处理表单元素,如`&lt;input&gt;`, `&lt;select&gt;`, `...

    JavaScript程序设计——DOM访问实验报告.docx

    实验报告的主题是“JavaScript程序设计——DOM访问”,其目的是深入理解和掌握DOM(Document Object Model)在JavaScript中的应用,包括文档对象的属性、方法以及使用方式。DOM是HTML和XML文档的标准化表示,允许...

    javascript对table的添加,删除行的操作

    在JavaScript中,对HTML表格(`&lt;table&gt;`元素)进行添加和删除行的操作是常见的前端开发任务,尤其在动态展示数据或用户交互场景下。这篇博文主要探讨如何使用JavaScript实现这些功能。 首先,我们需要理解HTML表格...

    javascript 操作 Table 排序

    在JavaScript中,操作HTML表格(Table)进行排序是一项常见的任务,尤其在动态数据展示和用户交互中。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先,我们需要理解HTML表格的基本结构。一个HTML...

    Beginning JavaScript with DOM Scripting and Ajax: Second Editon

    Beginning JavaScript with DOM Scripting and Ajax is an essential resource for modern JavaScript programming. This completely updated second edition covers everything you need to know to get up-to-...

    Beginning JavaScript with DOM Scripting and Ajax (pdf + ePub)

    Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition (pdf + ePub) by Russ Ferguson and Christian Heilmann Publisher: Apress; 2nd Edition (July 2013) Language: English ISBN-10: 1430250925 ...

    JavaScript Table行定位效果

    总的来说,实现"JavaScript Table行定位效果"涉及了JavaScript基础、DOM操作、事件处理、CSS样式控制以及性能优化等多个方面。`TableFixed.htm`文件的代码将把这些概念转化为实际的解决方案,通过分析这个文件,我们...

    js动态创建table点击按钮dom table tr添加操作

    本主题主要聚焦于如何利用JavaScript动态创建一个包含表格(table)的DOM结构,并且在表格行(tr)中添加可点击的按钮。这通常用于展示数据集,允许用户进行交互操作,比如删除、编辑或查看详情。 首先,我们需要...

    Javascript操作BOM和DOM

    JavaScript是一种广泛应用于网页和网络应用的脚本语言,主要负责客户端...了解并熟练掌握JavaScript操作BOM和DOM,是成为高效前端开发者的基础。通过这些技术,开发者能够创建出丰富、动态且具有高度交互性的网页应用。

    javascript table 增加删除行,巧妙实现

    在JavaScript中,我们可以使用DOM操作来对表格进行增删操作。以下是一个简单的增加行的示例: ```javascript function addRow(tableId, data) { var table = document.getElementById(tableId); var newRow = ...

    js表格操作,DOM实现数据动态增删查改

    在JavaScript编程中,DOM(Document Object Model)是用于表示HTML或XML文档的一种树形...这不仅锻炼了JavaScript操作DOM的能力,也加深了对数据管理的理解。记住,实践是最好的老师,动手尝试是掌握这些技巧的关键。

    使用JavaScript和DOM动态创建表格

    使用JavaScript和DOM动态创建表格

    给 Table 增加行的 JavaScript 函数

    JavaScript 作为浏览器端的主要脚本语言,提供了丰富的 API 和方法来操作 DOM 元素,包括表格。 在 HTML 中,`&lt;table&gt;`元素用于创建表格,而行由`&lt;tr&gt;`元素定义,单元格则由`&lt;td&gt;`或`&lt;th&gt;`元素表示。要使用 ...

    07-DOM操作表格

    10. **IntelliJ IDEA配置**:IntelliJ是一款强大的集成开发环境,对于处理JavaScript和DOM操作非常友好。安装插件如HTML5插件可提供更好的语法高亮和代码补全。设置项目结构,关联HTML和JS文件,可以方便地在IDE中...

    一个用于将JSON数据转换为Table的JavaScript库

    开发者无需手动编写繁琐的DOM操作代码,只需调用库提供的API,即可轻松完成JSON到表格的转换。 在JavaScript开发中,特别是在涉及到数据展示的项目中,此库能够极大地提高开发效率。以下是关于这个库的一些关键知识...

    javascript DOM操作之动态删除TABLE多行

    在JavaScript中,动态地删除HTML表格(TABLE)中的多行数据是一种常见的DOM操作。DOM(文档对象模型)是HTML和XML文档的编程接口,它允许我们通过脚本编程的方式动态地修改文档结构、样式和内容。 首先,需要了解...

    javascript动态生成table及处理.

    - 避免频繁操作 DOM,可以考虑使用变量暂存结果后再一次性更新 DOM。 - 对于大量数据,考虑使用虚拟滚动或分页技术减少内存消耗。 - **用户体验**: - 提供清晰的用户指南或提示,帮助用户理解如何使用表格。 - ...

    JavaScript的Table表格对象

    在JavaScript中,我们可以使用DOM(Document Object Model)接口来操作这些元素。 1. **获取表格元素** - `document.getElementById('tableId')`: 通过表格ID获取表格对象。 - `document.getElementsByTagName('...

    JavaScript动态操作表格,添加,删除行、列及单元格

    实现更高级的功能,如数据持久化或响应式设计,可以结合使用JavaScript库,如jQuery、React或Vue.js,它们提供了更为方便的数据绑定和DOM操作接口。 9. **兼容性考虑** 当编写JavaScript代码时,要确保考虑到不同...

    JavaScript DOM操作表格及样式

    &lt;table&gt;标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var ...

Global site tag (gtag.js) - Google Analytics