使用JavaScript和DOM动态创建HTML表格教程

77 浏览量更新于2024-09-02 收藏 77KB PDF 举报

"JavaScript与DOM组合动态创建表格实例，涵盖了DOM1.0的基本操作，包括创建、获取、控制和删除HTML元素，特别是如何利用JavaScript动态生成HTML表格的示例。" 在网页开发中，JavaScript与Document Object Model (DOM) 结合使用能够实现动态交互的效果。DOM 是一种标准，允许编程语言（如JavaScript）来处理和操作HTML或XML文档的结构。DOM1.0是DOM的第一个版本，提供了一系列基础但强大的方法，使得开发者可以通过JavaScript对网页内容进行实时修改。在这个实例中，我们关注的是如何动态创建一个HTML表格。首先，我们需要获取页面上的`<body>`元素，这可以通过`document.getElementsByTagName("body")[0]`来实现。`getElementsByTagName`方法返回一个包含指定标签名的所有元素的NodeList对象，这里我们只取第一个元素。接着，我们创建`<table>`和`<tbody>`元素。`createElement`函数用于创建新的HTML元素，例如`mytable = document.createElement("table")`。然后，我们可以为表格添加`<tbody>`元素，因为表格的行通常放在`<tbody>`标签内。为了填充表格，我们需要创建多行和多列。这里使用两个嵌套的循环来创建`<tr>`（行）和`<td>`（单元格）元素。外层循环（`for var j=0; j<2; j++`）代表行，内层循环（`for var i=0; i<2; i++`）代表列。对于每个单元格，我们创建一个`<td>`元素，并使用`createTextNode`生成包含特定文本的文本节点。然后，将这个文本节点添加到单元格中，再将单元格添加到当前行。最后，将行添加到表格的`<tbody>`。完成表格的构建后，可以将其添加到页面上。这通过调用`mybody.appendChild(mytable)`实现，将`mytable`添加到`mybody`（即`<body>`元素）的子元素列表中，从而将整个表格显示在网页上。这个实例展示了DOM操作的基本流程，不仅适用于创建表格，还可以应用于其他HTML元素的动态生成、更新或删除。理解并熟练运用这些方法是成为前端开发专家的关键步骤，它们为网页添加了丰富的交互性和动态性。在实际开发中，开发者可以进一步扩展这些概念，创建复杂的表格布局，或者根据用户行为动态改变表格内容。

JavaScript与与DOM组合动态创建表格实例组合动态创建表格实例

简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们;你可以学到如何动态地创建、获

取、控制和删除HTML元素

简介简介

　　这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们。你可以学到如何动态地创建、获

取、控制和删除HTML元素。这些DOM方法同样适用于XML。所有全面支持DOM 1.0的浏览器都能很好地运行本篇的实例，

比如IE5，Firefox等。

概况概况－－ Sample1.html

　　这篇文章通过实例代码介绍DOM。请从尝试下面的HTML例子开始。它使用DOM 1的方法由JavaScript动态创建一个

HTML表格。它创建一个由四个包含文本内容的单元格组成的小表格。单元格的文字内容是：“单元格是第y行第x列”，表示单

元格在表格中的行数和列数。

复制代码代码如下:

<html>

<head>

<title>实例代码 - 使用JavaScript和DOM创建HTML表格</title>

function start() {

//获取body标签

var mybody = document.getElementsByTagName("body")[0];

// 创建一个<table>元素和一个<tbody>元素

mytable = document.createElement("table");

mytablebody = document.createElement("tbody");

//创建所有的单元格

for(var j = 0; j < 2; j++) {

// 创建一个<tr>元素

mycurrent_row = document.createElement("tr");

for(var i = 0; i < 2; i++) {

// 创建一个<td>元素

mycurrent_cell = document.createElement("td");

//创建一个文本节点

currenttext = document.createTextNode("单元格是第"+j+"行，第"+i+"列");

// 将创建的文本节点添加到<td>里

mycurrent_cell.appendChild(currenttext);

// 将列<td>添加到行<tr>

mycurrent_row.appendChild(mycurrent_cell);

}

// 将行<tr>添加到<tbody>

mytablebody.appendChild(mycurrent_row);

}

// 将<tbody>添加到<table>

mytable.appendChild(mytablebody);

//将<table>添加到<body>

mybody.appendChild(mytable);

// 将表格mytable的border属性设置为2

mytable.setAttribute("border", "2");

}

</script>

</head>

</body>

</html>

注意我们创建各元素和文字节点的顺序注意我们创建各元素和文字节点的顺序：

1.创建< table >元素

2.创建< table >的子元素< tbody >

3.使用一个循环来创建< tbody >的子元素< tr >

4.分别使用循环为每一个< tr >创建子元素< tb >

5.为每一个< tb >创建文本节点

创建完< table >,< tbody >,< tr >,< td >元素和文本节点，我们使用相反的顺序把它们分别添加到自己的父节点。

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38693589

粉丝: 5
资源: 928

使用JavaScript和DOM动态创建HTML表格教程

JavaScript动态创建表格元素实例

JavaScript动态创建与删除表格行实例

JavaScript动态创建表格的三种方法解析

javascript动态创建表格及添加数据实例详解

动态Javascript表格实例

JavaScript 学习笔记（十三）Dom创建表格

javascript DOM编程实例(智播客学习)

[其他类别]动态添加表格实例 v1.0_dtbg.zip

JQuery 动态生成Table表格实例代码

JavaScript创建表格的方法

最新资源