`
sisi1984117
  • 浏览: 156110 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

【转】使用JavaScript和DOM动态创建表格

 
阅读更多
简介
　　这篇文章简单介绍了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>
<script>
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 onload="start()">
</body>
</html>
注意我们创建各元素和文字节点的顺序：
1.创建< table >元素
2.创建< table >的子元素< tbody >
3.使用一个循环来创建< tbody >的子元素< tr >
4.分别使用循环为每一个< tr >创建子元素< tb >
5.为每一个< tb >创建文本节点
　　创建完< table >,< tbody >,< tr >,< td >元素和文本节点，我们使用相反的顺序把它们分别添加到自己的父节点。
1.将创建的文本节点添加到< td >里
mycurrent_cell.appendChild(currenttext);
2.将列< td >添加到行< tr >
mycurrent_row.appendChild(mycurrent_cell);
3.将行< tr >添加到< tbody >
mytablebody.appendChild(mycurrent_row);
4.将< tbody >添加到< table >
mytable.appendChild(mytablebody);
5.将< table >添加到< body >
mybody.appendChild(mytable);
记住这个方法。当你使用W3C DOM时会经常用到它。首先，你从上向下建立元素；然后从下向上把它们添加到父节点。
这是JavaScript代码生成的HTML：
...
<table border=5>
<tr><td>单元格是第0行，第0列</td><td>单元格是第0行，第1列</td></tr>
<tr><td>单元格是第1行，第0列</td><td>单元格是第1行，第1列</td></tr>
</table>
...
这是代码生成的表格元素和它的子元素的DOM对象树：
　　你只需使用少量的DOM方法就可以构造这样一个表格和他的子元素。记住要时刻谨记你将创建的构造的模型树；这样会使编写代码更加简单。在图中的< table >树里，< table >有一个子元素< tbody >。< tbody >有两个子元素。< tbody >的每个子元素（< tr >）都有两个子元素< td >。最后，每个< td >有一个子元素：一个文本节点。　　
基本的DOM方法 － Sample2.html
　　getElementByTagName方法适用于文档和元素，所以文档根对象和所有的元素对象一样有 getElementByTagName 方法。你可以使用 element.getElementsByTagName(tagname) 来获取某个元素所有子元素的列表，使用标签名选择它们。
　　element.getElementsByTagName 返回一个有特定标签名的子元素的列表。你可以通过调用一个item方法（传递一个index参数给它）来从这个子元素列表中获取一个元素。请注意列表第一个子元素的index为0。下一个主题继续前面的Table例子。下面这个实例更加简单，显示了一些基本的方法：
<html>
<head>
<title>实例代码 - 使用JavaScript和DOM创建HTML表格</title>
<script>
function start() {
// 获取一个包含所有body元素的列表（将只有一个）
// 然后选择列表里的第一个元素
myBody = document.getElementsByTagName("body")[0];
// 获取body字元素中所有的p元素
myBodyElements = myBody.getElementsByTagName("p");
//获取p元素列表的第二个元素（索引从0开始）
myP = myBodyElements[1];
}
</script>
</head>
<body onload="start()">
<p>hi</p>
<p>hello</p>
</body>
</html>
在这个例子里，我们设置myP变量为表示body里第二个p元素的DOM对象。
1.获取一个包含所有body元素的列表
myBody = document.getElementsByTagName("body")[0];
因为一个有效的html文档只有一个body元素，这个列表讲只有一项。我们通过使用 [0] 选取列表的第一个元素来得到它。
2.获取blog子元素里所有的p元素
myBodyElements = myBody.getElementsByTagName("p");
3.选取p元素列表的第二项
myP = myBodyElements[1];
一旦获得一个html元素的DOM对象，你就可以设置它的属性。比如，你想设置style background color属性，只需要添加：
myP.style.background = "rgb(255,0,0)";
使用document.createTextNode(”..”)创建文本节点
使用文档对象调用createTextNode方法建立你的文本节点。你只需要输入文本内容。返回值是一个表示这个文本节点的对象。
myTextNode = document.createTextNode("world");
以上代码创建一个文本数据是“word”的TEXT_NODE类型（文字块）节点，变量myTextNode指向这个节点对象。你需要设置这个文本节点为其他节点元素的字节点来插入这个文本到你的html页面里。
使用appendChild(..)插入元素
所以，通过调用myP.appendChild([node_element])，你设置这个文本节点为第二个p元素的字节点。
myP.appendChild(myTextNode);
测试这个例子，注意“hello”和“world”两个词是连在一起的：“helloworld”。所以在当你看到html页面时两个文本节点hello和world看起来好像是一个节点，而实际上在这个文档模型里有两个节点。第二个节点是一个新的TEXT_NODE类型节点，并且是第二个p标签的第二个字节点。下图在文档树里显示了刚创建的文本节点。
createTextNode和appendChild是在hello和world之间添加空格的一种简单的方法。需要特别注意的是appendChild方法将添加在最后一个子节点后面，就像world被添加到hello后面。所以如果你想在hello和world之间添加一个文本节点需要使用insertBefore方法而不是appendChild。
使用文档对象和createElement(..)方法创建新元素
　　你可以使用createElement方法创建新的HTML元素或者其他任何你想要的其他元素。例如，如果你想为< body >元素添加一个字节点< p >元素，可以使用前例中的myBody添加一个新的元素节点。创建一个节点只需要调用document.createElement(”tagname”)。例如：
myNewPTAGnode = document.createElement("p");
myBody.appendChild(myNewPTAGnode);
使用removeChild(..)方法删除节点
　　每个节点都可以删除。下面这行代码删除myP（第二个< p >元素）里包含单词world的文本节点。
myP.removeChild(myTextNode);
　　最后你可以把包含单词world的文本节点myTextNode添加到新创建的< p >元素里：
myNewPTAGnode.appendChild(myTextNode);
　　修正的对象树最后像这样：
动态创建一个表格（回到Sample1.html）
　　文章的剩余部分将回到Sample1.html。下图显示了例子中创建的表格的对象树结构。
回顾HTML表格结构
创建元素节点并把它们添加到文档树
创建sample1.html里的表格的基本步骤：
获取body对象（文档对象的第一项） 
创建所有的元素 
最后，按照上图的表格结构添加每一个字节点下面的源代码是sample1.html的注释 
start函数的最后有一行新代码，使用另一个DOM方法setAttribute设置了表格的border属性。setAttribute方法有两个参数：属性名和属性值。你可以使用setAttribute方法设置任何元素的任何属性。
<head>
<title>实例代码 - 使用JavaScript和DOM创建HTML表格</title>
<script>
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 onload="start()">
</body>
</html>
使用DOM和CSS处理表格
从表格中获取一个文本节点
　　这个例子介绍两个新的DOM属性。首先使用childNodes属性获取mycel的字节点列表。这个childNodes列表包含所有的字节点，不管它们的名称和类型是什么。像getElementsByTagName方法一样，它返回一个字节点列表，使用 [ x ] 来获取想要的字节点项。这个例子将myceltext存储为表格第二行第二个单元格的文本节点。最后，它创建一个新的包含myceltext 的data 属性 的文本节点，并使它成为< body >元素的子节点，来显示这个例子的最后结果。
如果你的对象是文本节点，你可以使用data属性来获取它的内容
mybody      = document.getElementsByTagName("body")[0];
mytable     = mybody.getElementsByTagName("table")[0];
mytablebody = mytable.getElementsByTagName("tbody")[0];
myrow       = mytablebody.getElementsByTagName("tr")[1];
mycel       = myrow.getElementsByTagName("td")[1];
// mycel的字节点列表的第一项
myceltext=mycel.childNodes[0];
// currenttext的内容是myceltext的data
currenttext=document.createTextNode(myceltext.data);
mybody.appendChild(currenttext);
获取一个属性值
　　在sample1的最后有一个单元格使用了mytable对象的setAttribute方法。这个单元格用来设置这个表格的border属性。使用getAttribute方法来获取这个属性：
mytable.getAttribute("border");
通过改变style属性隐藏列
　　当你使用一个JavaScript变量指向对象，你可以立即设置它的style属性。下面的代码是sample1.html的修改，第二列的单元格都被隐藏，第一列的单元格背景改为红色。注意style属性是直接设置的。
<html>
<body onload="start()">
</body>
<script>
function start() {
var mybody =document.getElementsByTagName("body")[0];
mytable     = document.createElement("table");
mytablebody = document.createElement("tbody");
for(var j = 0; j < 2; j++) {
   mycurrent_row=document.createElement("tr");
   for(var i = 0; i < 2; i++) {
       mycurrent_cell = document.createElement("td");
       currenttext = document.createTextNode("单元格是:" + i + j);
       mycurrent_cell.appendChild(currenttext);
       mycurrent_row.appendChild(mycurrent_cell);
       // 如果在第0列设置单元格背景色
       // 如果在第1列隐藏单元格
       if (i == 0) {
       mycurrent_cell.style.background = "rgb(255,0,0)";
       } else {
       mycurrent_cell.style.display = "none";
       }
   }
   mytablebody.appendChild(mycurrent_row);
}
mytable.appendChild(mytablebody);
mybody.appendChild(mytable);
}
</script>
</html> 
分享到：
| 【转】如何摆脱JS糟糕的字符串连接
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    使用JavaScript和DOM动态创建表格

    使用JavaScript和DOM动态创建表格

    javascript下动态创建表格的三种方式

    ### JavaScript 下动态创建表格的三种方式 在网页开发过程中，经常需要通过JavaScript来动态地创建或更新HTML元素，其中就包括表格（`&lt;table&gt;`）。本文将详细介绍在JavaScript中动态创建表格的三种常见方法，并对每...

    老裴帮助关于Javascript动态创建表格的小练习

    标题中的“老裴帮助关于Javascript动态创建表格的小练习”指的是一个使用JavaScript编程语言来动态创建HTML表格的学习资源或教程。JavaScript是一种广泛应用于客户端Web开发的脚本语言，它允许开发者在用户与网页...

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

    它使用DOM 1的方法由JavaScript动态创建一个HTML表格。它创建一个由四个包含文本内容的单元格组成的小表格。单元格的文字内容是：“单元格是第y行第x列”，表示单元格在表格中的行数和列数。 代码如下:&lt;ht

    javascript动态操作表格

    使用JavaScript，我们可以动态创建这些元素并插入到文档中。例如： ```javascript // 创建一个新的表格 var table = document.createElement('table'); // 创建一行 var row = document.createElement('tr'); // ...

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

    通过以上步骤，你可以使用原生JavaScript和DOM操作实现一个功能完备的数据表格系统，满足动态增删查改的需求。这不仅锻炼了JavaScript操作DOM的能力，也加深了对数据管理的理解。记住，实践是最好的老师，动手尝试是...

    JavaScript动态添加删除表格行

    在HTML中，`&lt;table&gt;`元素用于创建表格，而动态操作表格行通常涉及到DOM（Document Object Model）的操作。JavaScript提供了对DOM的访问和修改能力，让我们能够动态地添加、删除或修改表格元素。 1. **添加表格行**...

    javascript动态创建表格.doc

    在JavaScript中动态创建表格是一项常见的任务，特别是在网页交互和数据展示中。本文将深入探讨如何利用JavaScript的`insertRow()`和`insertCell()`方法来添加行和单元格，以及如何使用`deleteRow()`和`deleteCell()`...

    javascript 动态创建表格：新增、删除行和单元格.zip

    本压缩包中的"javascript 动态创建表格：新增、删除行和单元格.zip"内容着重介绍了如何使用JavaScript来动态地构建和修改HTML表格。 首先，我们要理解表格在HTML中的基本结构，它由`&lt;table&gt;`元素包含，内部包含`...

    jQuery动态创建表格生成器代码.zip

    本文将深入解析"jQuery动态创建表格生成器代码"，帮助你快速理解和应用这一实用工具。 首先，我们要明确jQuery动态创建表格的基本原理。jQuery通过操作DOM（文档对象模型）来实现页面元素的动态生成。在本案例中，...

    js读取json数据动态生成列数不固定的表格

    我们可以利用`document.createElement()`、`.appendChild()`等方法动态创建这些元素。 4. **数据驱动视图**：根据JSON数据的结构，我们需要遍历数据，为每一项生成对应的表格行。如果列数不固定，我们需要在开始...

    动态创建表格标签

    此外，现代前端框架，如React、Vue或Angular，提供了更高级的组件系统和虚拟DOM，使得动态创建表格标签更为便捷和高效。 “WorkFlow演示”这个文件名可能暗示了一个工作流程管理的场景，其中动态表格可能用于显示、...

    javascript动态添加表格数据行

    总结来说，这个示例展示了如何使用JavaScript在前端动态添加表格行，以及如何通过表单提交这些数据到服务器。虽然例子使用的是较旧的技术（如IE6和ASP），但基本的JavaScript逻辑仍然适用于现代Web开发。在现代Web...

    动态创建删除表格

    要动态创建表格，我们可以使用jQuery的`append()`方法在页面上指定的元素后添加新的HTML代码。 1. **创建整个表格**： 假设我们有一个空的`div`元素用于放置表格，其ID为`tableContainer`。可以这样创建一个2行3列...

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

    JavaScript DOM操作是网页动态交互的核心技术之一，尤其在创建和修改HTML元素时，如本例中的动态创建表格。本文将详细讲解如何利用JavaScript的DOM API创建表格，包括插入行、插入单元格、删除行以及设置元素属性。 ...

    Dom生成表格和实现分页源码

    利用DOM，我们可以动态创建这些元素并插入到文档中。例如： ```javascript // 创建表格元素 var table = document.createElement('table'); // 创建表头 var thead = document.createElement('thead'); // 创建表头...

    jquery 动态创建表格单元随机色

    在这个场景中，我们关注的是如何使用 jQuery 动态创建表格，并且为表格的每个单元格赋予随机背景颜色。这通常用于增强用户界面的视觉吸引力，或者在数据展示时提供更直观的区分。 首先，我们需要理解 jQuery 如何...

    基于JavaScript实现动态创建表格和增加表格行数

    下面将详细解析关于如何使用JavaScript实现动态创建表格和增加表格行数的相关知识点。 ### 知识点一：使用`document.write()`和`document.createElement()` 在提供的代码示例中，`document.write()`和`document....

Magicbox
Global site tag (gtag.js) - Google Analytics