练习：

用纯JavaScript语言创建一个五行三列的table表格。

目标效果展示：

javascript 编辑表格 javascript做表格_前端


代码详解：

<!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()控制台打印输出一下，参看是否符合标准。

针对这样的练习，主要是锻炼我们的关键字使用情况和一些逻辑思路，而不是在创建表格本身。