8.动态创建表格Demo

最新推荐文章于 2023-10-31 10:05:29 发布

cuichen97

最新推荐文章于 2023-10-31 10:05:29 发布

阅读量222

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/cuichen16/article/details/98896624

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#tstu{
				width: 700px;
				/*边框合并*/
				border-collapse: collapse;
			}
			#tstu td{
				border: 1px solid black;
				text-align: center;
				color: blue;
			}
		</style>
		<script type="text/javascript">
			//全局变量：声明在所有方法外部的变量，同一个文件内的任何方法都可以调用
			//局部变量：声明在方法内部的变量，只有在所声明方法内部可以使用
			var aryStu=new Array();
			//初始化学生数据，存入aryStu数组中
			function initData(){
				var stu1={no:"1001",name:"aa",addr:"理工北门",phone:"138383866"};
				var stu2={no:"1002",name:"bb",addr:"理工北门",phone:"133383866"};
				var stu3={no:"1003",name:"cc",addr:"中山区",phone:"139383866"};
				var stu4={no:"1004",name:"dd",addr:"山海一家",phone:"136383866"};
				var stu5={no:"1005",name:"ee",addr:"山海一家",phone:"138383866"};
				var stu6={no:"1006",name:"ff",addr:"老鳖湾",phone:"139383866"};
				aryStu[0]=stu1;
				aryStu[1]=stu2;
				aryStu[2]=stu3;
				aryStu[3]=stu4;
				aryStu[4]=stu5;
				aryStu[5]=stu6;
			}
			//把aryStu数组中的数据动态添加到表格中
			function appendStu(){
				//获取表格
				var table=document.querySelector("#tstu");
				//遍历数组，把每个元素在循环中添加到表格里
				for(var i=0; i<aryStu.length; i++){
					//获取数组元素
					var temp=aryStu[i];
					//创建tr
					var tr=document.createElement("tr");
					//添加到表格中
					table.appendChild(tr);
					//创建各个列
					var td1=document.createElement("td");
					td1.innerHTML=temp.no;
					tr.appendChild(td1);
					
					var td2=document.createElement("td");
					td2.innerHTML=temp.name;
					tr.appendChild(td2);
					
					var td3=document.createElement("td");
					td3.innerHTML=temp.phone;
					tr.appendChild(td3);
					
					var td4=document.createElement("td");
					td4.innerHTML=temp.addr;
					tr.appendChild(td4);
					
					var td5=document.createElement("td");
					//创建删除按钮
					var btnDelete=document.createElement("input");
					btnDelete.type="button";
					btnDelete.value="删除";
					td5.appendChild(btnDelete);
					tr.appendChild(td5);
					
					btnDelete.onclick=function(){
						var flag=confirm("确定要删除吗？");
						if(flag==true){
							this.parentNode.parentNode.remove();
						}
					}
				
				}
			}
			//页面加载结束调用
			window.onload=function(){
				initData();
				appendStu();
			}
			function insertStu(){
				var table=document.querySelector("#tstu");
				//获取值
				var no=document.getElementsByName("no")[0].value;
				var name=document.getElementsByName("stuname")[0].value;
				var phone=document.getElementsByName("phone")[0].value;
				var addr=document.getElementsByName("addr")[0].value;
				//把字符串构造成key:value格式
				//var str="no:'"+no+"',name:'"+name+"',addr:'"+addr+"',phone:'"+phone+"'";
				//把字符串转换成JSON对象
				//var jsonobj=JSON.parse(str);
				
				//创建tr
					var tr=document.createElement("tr");
					//添加到表格中
					table.appendChild(tr);
					//创建各个列
					var td1=document.createElement("td");
					td1.innerHTML=no;
					tr.appendChild(td1);
					
					var td2=document.createElement("td");
					td2.innerHTML=name;
					tr.appendChild(td2);
					
					var td3=document.createElement("td");
					td3.innerHTML=phone;
					tr.appendChild(td3);
					
					var td4=document.createElement("td");
					td4.innerHTML=addr;
					tr.appendChild(td4);
					
					var td5=document.createElement("td");
					//创建删除按钮
					var btnDelete=document.createElement("input");
					btnDelete.type="button";
					btnDelete.value="删除";
					td5.appendChild(btnDelete);
					tr.appendChild(td5);
					
					btnDelete.onclick=function(){
						var flag=confirm("确定要删除吗？");
						if(flag==true){
							this.parentNode.parentNode.remove();
						}
					}
					
				
			}
		</script>
	</head>
	<body>
		<p>
			学号：<input type="text" name="no" />
		</p>
		<p>
			姓名：<input type="text" name="stuname" />
		</p>
		<p>
			电话：<input type="text" name="phone" />
		</p>
		<p>
			地址：<input type="text" name="addr" />
		</p>
		<input type="button" value="添加" onclick="insertStu()" />
		<hr />
		<table id="tstu">
			<tr>
				<td>学号</td>
				<td>姓名</td>
				<td>电话</td>
				<td>地址</td>
				<td>操作</td>
			</tr>
		</table>
	</body>
</html>

cuichen97

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
8.动态创建表格Demo

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #tstu{ width: 700px; /*边框合并*/ border-collap...
复制链接

扫一扫