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>
</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>
</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>
您可能感兴趣的文章: