DOM中简单的表格操作

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

Curry 3O

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

阅读量200

点赞数

分类专栏： DOM 文章标签： DOM

本文链接：https://blog.csdn.net/qq_42552393/article/details/96477425

版权

DOM 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>

运行结果:

在这里插入图片描述

点击按钮后:

在这里插入图片描述

Curry 3O

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM中简单的表格操作

DOM是针对HTML和XML文档的一个API（应用程序编程接口）,DOM描绘了一个层次化的节点树，允许开发人员添加，移除，修改页面的某一部分。<script>window.onload = function(){ var arr = [{ id:1001, name:'hb', age:22, },{ id:1002, name:...
复制链接

扫一扫