创建表格的另一种方法

最新推荐文章于 2024-08-12 11:44:21 发布

天空守护云

最新推荐文章于 2024-08-12 11:44:21 发布

阅读量135

点赞数

本文链接：https://blog.csdn.net/weixin_44606660/article/details/86601365

版权

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></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="txt-name">
	<label for="">年龄：</label><input type="text" id="txt-age">
	<label for="">住址：</label><input type="text" id="txt-addr">
	<button id="btn-add">添加</button>
	<script type="text/javascript">
		//查找元素
		var sname=document.getElementById("txt-name");
		var sage=document.getElementById("txt-age");
		var saddr=document.getElementById("txt-addr");
		var btn=document.getElementById("btn-add");
		//造表格
		var tab=document.createElement("table");
		//造标题
		var cap =document.createElement("caption");
		cap.innerHTML="学生信息表";
		tab.appendChild(cap);
		//造表头行
		var thead=document.createElement("tr");
		//往表头行里添加列
		var th1=addTh("姓名");
		var th2=addTh("年龄");
		var th3=addTh("住址");
		var th4=addTh("操作");
		//把列放入行里面
		thead.appendChild(th1);
		thead.appendChild(th2);
		thead.appendChild(th3);
		thead.appendChild(th4);

		tab.appendChild(thead);
		

        btn.onclick=function(){
        	if(sname.value==""||sage.value==""||saddr.value==""){
                 alert("姓名、年龄、住址均不能为空");
                 return;
        	}
        	var tr1=addTr(sname.value,sage.value,saddr.value);
        	tab.appendChild(tr1);
            document.body.appendChild(tab);
            sname.value="";
            sage.value="";
            saddr.value="";

        }
        //造tr
        function addTr(sname,sage,saddr){
        	var tr=document.createElement("tr");
        	var td1=addtd(sname);
        	var td2=addtd(sage);
        	var td3=addtd(saddr);
        	tr.appendChild(td1);
        	tr.appendChild(td2);
        	tr.appendChild(td3);
        	var link=document.createElement("a");
				link.href="#";
				link.innerHTML="删除";
				link.onclick=function(){
					if(confirm("是否删除？")){
						this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
					}
				}
				tr.appendChild(addtd(link));
				return tr;
        }


		//造th列
		function addTh(content){
			var th=document.createElement("th");
			th.innerHTML=content;
			return th;
		}
		//造td列
		function addtd(content){
			var td=document.createElement("td");
			if (typeof content=="string") {
				td.innerHTML=content;
			}else{
				td.appendChild(content);
			}
			return td;
		}
		
	</script>

</body>
</html>