js DOM 动态生成表格，创建学生数据 +3种创建元素的区别

最新推荐文章于 2022-08-04 14:00:30 发布

phoebemeng

最新推荐文章于 2022-08-04 14:00:30 发布

阅读量467

点赞数

分类专栏： javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/phoebemeng/article/details/125781460

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript动态生成表格，包括创建学生数据、创建行和单元格、填充数据以及实现删除操作。同时，文章探讨了三种动态创建DOM元素的区别：document.write()、element.innerHTML和document.createElement()，并强调在不同浏览器环境下，innerHTML的效率可能优于createElement。

摘要由CSDN通过智能技术生成

创建表格，分为头部head和主体body
头部标题部分是固定的，主体的body是动态生成的。
（1）创建学生数据
先把头部thead样式写好，然后再创建学生数据；学生数据可以按照数组的形式保存

var dates = [
				{ 
					name:'新一',
					subject:'javascript',
					score: 100
				},
				{
					name:'柯南',
					subject:'javascript',
					score: 100
				},
				{
					name:'小五郎',
					subject:'javascript',
					score: 90
				},
				{ 
					name:'小兰',
					subject:'javascript',
					score: 89
				}
			]

（2）创建行
根据对应人数（学生数据数组的长度）创建行数

for(var i=0;i<dates.length;i++){
				var tr = document.createElement('tr');
					//把创建的行添加到tbody里面
				tbody.appendChild(tr);
			}

（3）创建单元格
在行内创建单元格td ，单元格的数量取决于每个对象里的属性个数。

for(var k in dates[i]){
					var td =document.createElement('td');
					tr.appendChild(td);
				}

（4）单元格填充数据
for(var k in obj){
k 得到的是属性名
obj[k] 得到的是属性名
}
通过dates[i][k]获得属性值
（5）创建删除单元格

//创建删除单元格
				var td =document.createElement('td');
				td.innerHTML='<a href= "javascript:;">删除</a>';
				tr.appendChild(td);

（6）添加删除操作
获取所有a，依此添加注册事件，点击a，删除当前a所在的行(链接的爸爸的爸爸)。

var as =document.querySelectorAll('a');
			for(var i=0;i<as.length;i++){
				as[i].onclick = function(){
					tbody.removeChild(this.parentNode.parentNode)
				}
			}

完整代码:

<body>
		<table>
			<thead>
				<tr>
				<th>姓名</th>
				<th>科目</th>
				<th>成绩</th>
				<th>操作</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		
		<script>
			//准备学生的数据
			var dates = [
				{ 
					name:'新一',
					subject:'javascript',
					score: 100
				},
				{
					name:'柯南',
					subject:'javascript',
					score: 100
				},
				{
					name:'小五郎',
					subject:'javascript',
					score: 90
				},
				{ 
					name:'小兰',
					subject:'javascript',
					score: 89
				}
			]
			//往tbody里面创建行
			var tbody =document.querySelector('tbody');
				//有几组数据就 创建几行tr 通过for循环
			for(var i=0;i<dates.length;i++){
				var tr = document.createElement('tr');
					//把创建的行添加到tbody里面
				tbody.appendChild(tr);
				//创建单元格
				for(var k in dates[i]){
					var td =document.createElement('td');
					tr.appendChild(td);
					//获得属性值 dates[i][k]
					td.innerHTML=dates[i][k];
					tr.appendChild(td)
				}
				//创建删除单元格
				var td =document.createElement('td');
				td.innerHTML='<a href= "javascript:;">删除</a>';
				tr.appendChild(td);
				
			}
			//添加删除操作
			var as =document.querySelectorAll('a');
			for(var i=0;i<as.length;i++){
				as[i].onclick = function(){
					tbody.removeChild(this.parentNode.parentNode)
				}
			}
			
		</script>
	</body>

<style>
			table{
				width: 500px;
				margin: 10px auto;
				border-collapse: collapse;
				text-align: center;
			}
			thead tr{
				height: 40px;
				background-color: #ccc;
			}
			td,
			th{
				border: 1px solid #333;
			}
		</style>

三种动态创建元素的区别

1.document.write()
当文档流执行完毕,再去点击按钮创建元素,调用这句话时,页面会全部重绘
2.element.innerHTML
采用拼接字符串的方式,创建多个元素时,效率比较低;
采取数组形式拼接,效率是最高的,但结构复杂
3.document.createElement()
创建多个元素效率稍微低一点,但结构清晰.
总结:不同浏览器下,innerHTML效率要比.createElement高.