DOM中简单的表格操作

最新推荐文章于 2021-05-31 11:45:08 发布

原创最新推荐文章于 2021-05-31 11:45:08 发布 · 241 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#DOM

DOM 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种利用DOM API在JavaScript中动态创建HTML表格的方法。通过遍历数组对象，可以将数据填充到表格中，实现了按钮点击加载数据的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM是针对HTML和XML文档的一个API（应用程序编程接口）,DOM描绘了一个层次化的节点树，允许开发人员添加，移除，修改页面的某一部分。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格显示</title>
<script>
	window.onload = function(){
		var arr = [{
				id:1001,
				name:'hb',
				age:22,
			},{
				id:1002,
				name:'lm',
				age:21,
			},{
				id:1003,
				name:'yoyo',
				age:27,
			}];
		//按钮点击，将数据展示到表中
		var btn = document.getElementsByTagName('button')[0];
		var tbody = document.getElementsByTagName('tbody')[0];

		//给按钮绑定点击事件
		btn.onclick = function(){
			//清空tbody
			tbody.innerHTML = '';
			//数组中的一个对象-->tr
			//对象中的属性值-->td
			//forEach遍历数组(遍历出三个对象)
			arr.forEach(function(item){
				var newTr = document.createElement('tr');
				//for-in遍历对象
				for(var key in item){
					var newTd = document.createElement('td');
					newTd.innerText = item[key];
					newTr.appendChild(newTd);
				};
				tbody.appendChild(newTr);
			});
		};
	}
</script>
</head>
<body>
	<button>加载数据</button>
	<table>
		<tbody>
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
		</tbody>
	</table>
	
</body>
</html>