创建表格

最新推荐文章于 2024-05-18 13:50:21 发布

天空守护云

最新推荐文章于 2024-05-18 13:50:21 发布

阅读量107

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44606660/article/details/86601104

本文介绍了一个使用HTML、CSS和JavaScript实现的动态表格，通过按钮点击可以向表格中添加带有姓名、年龄和地址字段的新行，并提供了删除行的功能。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		table{width: 500px;border: 1px solid gray;border-collapse: collapse;}
		th,td{line-height: 35px;border: 1px solid gray;text-align: center;}
	</style>
</head>
<body>
	<label for="">姓名：</label><input type="text" id="name">
	<label for="">年龄：</label><input type="text" id="age">
	<label for="">住址：</label><input type="text" id="address">
	<button id="add">添加</button>
	<script type="text/javascript">
		var name1=document.getElementById("name");
		var age=document.getElementById("age");
		var address=document.getElementById("address");
		var add=document.getElementById("add");
		var tab=document.createElement("table");
		var tr1=addtr(false,"姓名","年龄","地址","操作");
		  tab.appendChild(tr1);
		add.onclick=function(){
			var op="<a href='#'>删除</a>"
			 if(name1.value==""||age.value==""||address.value==""){
            	alert("姓名，年龄，地址均不能为空");
            	return;
            }
            var tr2=addtr(true,name1.value,age.value,address.value,op);
            tab.appendChild(tr2);
            document.body.appendChild(tab);
            name1.value="";
		    age.value="";
		    address.value="";
		}
		function addtr(istd,name,age,address,op){
			var tr=document.createElement("tr");
			var td1=addtd(istd,name);
			var td2=addtd(istd,age);
			var td3=addtd(istd,address);
			var td4=addtd(istd,op);
			tr.appendChild(td1);
			tr.appendChild(td2);
			tr.appendChild(td3);
			tr.appendChild(td4);
			if(op!='操作'){
			td4.onclick=function(){
				if(confirm('是否删除？')){
				this.parentNode.parentNode.removeChild(this.parentNode);
			   }
			}
		}
			return tr;

		}
		function addtd(istd,content){
			if(istd){
				var td=document.createElement("td");
			}else{
                var td=document.createElement("th"); 
			}
			td.innerHTML=content;
			return td;
		}
	</script>  
</body>
</html>