练习：
用纯JavaScript语言创建一个五行三列的table表格。
目标效果展示：
代码详解：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<!-- //创建一个表格 五行三列 -->
<body>
<div id="box">
</div>
<script type="text/javascript">
date = ["r1 c1", "r1 c2", "r1 c3", 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
//先获取容器box，在box进行表格的添加
var box = document.getElementById("box")
//先定义一个大容器table，用来存放下面的tr和td
var table = document.createElement("table")
table.border = 1 //为了美观，设置边框为1px，这里用不用"1"都可以
for (var i = 0; i < 5; i++) {
var tr = document.createElement("tr"); //table建立之后，创建tr标签，
for (var j = 0; j < 3; j++) { //针对每个tr(行) 进行td（列）插入
var td = document.createElement("td") //创建td标签
var text = document.createTextNode(date[j + i * 3]) //创建文本内容
td.appendChild(text) //之后再进行丰富td标签
tr.appendChild(td); //丰富tr标签
}
table.appendChild(tr); //将tr插入table内，丰富table内容
}
box.appendChild(table) //将tr插入table内，完成table创建
console.log(box.innerHTML) //进行控制台打印，方便检查
</script>
</body>
</html>
细节都写在了注释中，可以好好看看注释，最主要的几个关键则是：
- createElement 创建节点
- appendChild添加子节点
- createTextNode创建文本节点
- 总的来说是
节点从大到声明(create)，从小到大添加(append),因为从小到大添加，不会出现插入节点位置出错的情况，注意在自己创建完成之后，一定要用console.log()控制台打印输出一下，参看是否符合标准。
针对这样的练习，主要是锻炼我们的关键字使用情况和一些逻辑思路，而不是在创建表格本身。
1005
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
