13,871
社区成员
发帖
与我相关
我的任务
分享请发表友善的回复…
发表回复
我不懂电脑 2019-05-10
- 打赏
- 举报
请从尝试下面的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 "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方法
<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 "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方法
