Java Script基础(七) HTML DOM模型
一、HTML DOM。
HTML DOM的特性和方法是专门针对HTML的,HTML中的每个节点都是一个对象,通过访问属性和方法的方式,让一些DOM操作更加简便,在HTML DOM中有专门用来处理白哦个及其元素的属性和方法。
下面以Table为例来讲解HTML DOM动态操作表格。
1、Table对象(表格)
在HTML DOM中, table对象代表一个HTML表格,TableRow对象代表HTML表格的行,tableCell对象代表HTML表格的单元格。在HTML中可以通过Table、TableRow和TableCell来创建HTML表格。
属性:
rows[]:获取表格中的所有行。
cellls[]:获取表格中的所有单元格。
方法:
inertRow(index):用于在表格的指定位置插入一个新行。
deleteRow(index):用于从表格中删除指定位置的行。
2、TableRow对象(行)
属性:
cells[]:返回当前行中的所有单元格。
rowIndex:返回当前行的下标。
方法:
insertCell(index):在一行中的指定位置插入单元格。
deleteCell(index):删除一行中指定位置的单元格。
3、TableCell对象(单元格)
属性:
cellIndex:返回当前单元格所在的下标
innerHTML:返回当前单元格中的HTML标记。
align:设置单元格的水平对齐方式。
className:设置单元格的class属性。
示例:
动态生成单元格的行,并为单元格赋值。
<html>
<head>
<script type="text/javascript">
function insRow()
{
var x=document.getElementById('myTable').insertRow(0)
var y=x.insertCell(0)
var z=x.insertCell(1)
y.innerHTML="NEW CELL1"
z.innerHTML="NEW CELL2"
}
</script>
</head> <body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="insRow()" value="插入行"> </body>
</html>
Java Script基础(七) HTML DOM模型的更多相关文章
- Java script基础
Java script基础 Js的每个语句后面都要有分号. <script type="text/java script">所有JS内容</script> ...
- Java Script 基础
一. JS的简介 JavaScript是一种网页编程技术,经常用于创建动态交互网页 JavaScript是一种基于对象和事件驱动的解释性脚本语言,类似C语言和Java的语法 事先不编译:逐行执行:无需 ...
- Java Script基础(六) DOM模型
一.文档对象模型 DOM( Document Object Model)文档对象模型,它提供了访问.动态修改文档的借口,W3C指定了DOM规范,主流浏览器都支持.DOM由3部分组成,分别是CoreDo ...
- Java Script基础(四) BOM模型
一.BOM模型 BOM模型(Browser Object Model),也称为文档对象模型,它包含浏览器相关的属性和方法,例如操作,前进后退按钮,控制地址栏,关闭浏览器窗口,打开新窗口等等.它包含的对 ...
- Java Script 基础总结
1学习ajax需要一点CSS的基础和JavaScipt基础 今天重温一下Javascrpt基础 1.<script type="text/javascript">< ...
- Java Script基础(一)
一.为什么学习JavaScript 学习JavaScript主要有以下两点原因. 1.客户端表单验证. 2.实现页面交互(网页特效) 二.什么是JavaScript JavaScript是一种描述语言 ...
- Java Script基础(十) 访问样式表
动态控制样式表 在JavaScript中,有两种方式可以动态的改变样式属性,一种是使用style属性,另一种是使用样式的className属性.另外控制元素隐藏和显示使用display属性. 1.使用 ...
- Java Script基础(九) 下拉列表对象
Select下拉列表 属性: options[]:返回包含下拉列表中的所有选项的一个数组. selectedIndex:设置返回下拉列表中被选项目的索引号. length:返回下拉列表框中选项的数目. ...
- Java Script基础(八) Array数组对象
一.Array数组 JavaScript中的数组也是具有相同数据类型的一个或者多个值得集合.用法和Java中的数组类似. Array对象的常用属性和方法: 属性: length:获取数组的长度: 方法 ...
随机推荐
- GetQueuedCompletionStatus的返回值
完成端口GetQueuedCompletionStatus返回值的问题 先看看GetQueuedCompletionStatus函数的完整声明:BOOL GetQueuedCompletionStat ...
- POJ 1005(累加)
/* * POJ_1005.cpp * * Created on: 2013年10月14日 * Author: Administrator */ #include <iostream> # ...
- mvc4帮助类
@App @AppState @Ajax @Cache @Context @Culture @Html @IsPost @Layout @Model @Output @OutputStack @Pag ...
- Unable to generate a temporary class (result=1)解决方法
Unable to generate a temporary class (result=1).error CS2001: Source file 'C:\WINDOWS\TEMP\ug5v9uxt. ...
- (4)html表格
本节解说 :html的表格 表格: *<table></table> 标签定义 HTML 表格. *简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 t ...
- Sqlite表的结构修改
Sqlite删除列方法 http://blog.csdn.net/aben_2005/article/details/6563538 SQLite3 table 结构修改 http://blog.cs ...
- 05_android入门_GET方式实现登陆(在控件上显示服务端返回的内容)
当点击登陆之后,怎么把server端返回的数据,写到指定的控件上尼?,在android怎么实现尼?以下我们通过详细的代码进行分析和实现,希望能对你,在学习android知识上有所帮助. 以下通过代码说 ...
- 关于java.lang.IllegalArgumentException: View not attached to window manager 错误的分析
今天遇到一个很奇特的问题,当用户设置了PIN码,在锁屏界面正常解锁PIN码后,进入Launcher时显示com.android.phone 已停止运行.一开始猜想会不会是解锁PIN码的时候处理导致了P ...
- replace into
讨人喜欢的 MySQL replace into 用法(insert into 的增强版) 在向表中插入数据的时候,经常遇到这样的情况:1. 首先判断数据是否存在: 2. 如果不存在,则插入:3.如果 ...
- [Node.js] Broswerify -- 2
Browserify allows you to leverage 10s of thousands of javascript modules available in the Node Packa ...