使用JavaScript和DOM动态创建表格(2)

最新推荐文章于 2022-02-27 15:10:47 发布

liangowen

最新推荐文章于 2022-02-27 15:10:47 发布

阅读量745

点赞数

分类专栏： ajax 文章标签： javascript border table html 文档存储

ajax 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

使用文档对象和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>

</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属性是直接设置的。