JavaScript与DOM组合动态创建表格实例_基础知识

mycurrent_cell.appendChild(currenttext);

2.将列

代码如下:

hi

hello

在这个例子里，我们设置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元素或者其他任何你想要的其他元素。例如，如果你想为元素添加一个字节点

元素，可以使用前例中的myBody添加一个新的元素节点。创建一个节点只需要调用document.createElement(”tagname”)。例如：

myNewPTAGnode = document.createElement("p");
myBody.appendChild(myNewPTAGnode);

使用removeChild(..)方法删除节点
　　每个节点都可以删除。下面这行代码删除myP（第二个

元素）里包含单词world的文本节点。

myP.removeChild(myTextNode);

　　最后你可以把包含单词world的文本节点myTextNode添加到新创建的

元素里：

myNewPTAGnode.appendChild(myTextNode);

　　修正的对象树最后像这样：

动态创建一个表格（回到Sample1.html）
　　文章的剩余部分将回到Sample1.html。下图显示了例子中创建的表格的对象树结构。
回顾HTML表格结构

创建元素节点并把它们添加到文档树
创建sample1.html里的表格的基本步骤：

start函数的最后有一行新代码，使用另一个DOM方法setAttribute设置了表格的border属性。setAttribute方法有两个参数：属性名和属性值。你可以使用setAttribute方法设置任何元素的任何属性。

代码如下:

如果你的对象是文本节点，你可以使用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);

mytable.getAttribute("border");

通过改变style属性隐藏列
　　当你使用一个Javascript变量指向对象，你可以立即设置它的style属性。下面的代码是sample1.html的修改，第二列的单元格都被隐藏，第一列的单元格背景改为红色。注意style属性是直接设置的。

代码如下:

baiyanan862273

这个家伙很懒，什么也没留下！

Tags | 热门标签

• cPlusPlus
• main
• settings
• testing
• header
• select
• char
• callback
• include
• blob
• c语言
• dagger
• php8
• hash
• javascript
• go
• chat
• post
• jsp
• shell
• rsa
• python2
• request
• search
• match
• byte
• netty
• uri
• uml
• import

RankList | 热门文章

• 1[10秒学会]iOS9新特性之常见关键字
• 2VC++的Socket中send函数和recv函数详解
• 3mysql plsql循环语句吗_PL/SQL基本循环语句
• 4mysql中断安装_MySQL安装图解
• 5io.swagger.v3.oas.models.media.MediaType.schema()方法的使用及代码示例
• 6中国已消失的9所世界级大学
• 7开发笔记:Android SQLite 学习2
• 8深入理解TypeScript认识TypeScript&配置详解
• 9选择容灾备份厂家的重要性
• 10hibernate的获取session的两方法比较，和通过id获取对象的比较，一级缓存二级缓存
• 11开发完iOS应用，接下去你该做的事
• 12力扣 旋转函数 Python实现
• 13浅谈web服务器项目中静态请求和动态请求处理
• 14Jump Crypto：从三个层面比较 LayerZero、Wormhole 等跨链桥安全性
• 15AD域用户登录Temp临时账户问题

PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有