实验五：JavaScript的综合使用二

最新推荐文章于 2023-09-16 08:00:00 发布

m0_62435488

最新推荐文章于 2023-09-16 08:00:00 发布

阅读量246

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_62435488/article/details/124853440

版权

案例就是一个表格的制作，先用HTML实现界面，功能部分就交给JavaScript

话不多说，直接上代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>福布斯中国富豪榜</title>
	<style>
		#divname{
			width: 727px;
			margin: 0 auto;
		}
		h2{
			text-align:center;
		}
		#table {
            border-collapse: collapse;
            width: 50%;
            margin: 0 auto;
        }
		#table th,#table td{
            border: 1px solid rgb(65, 64, 64);
            padding: 8px;
        }
		
	</style>
	<script>
		function add(){
			var name=document.getElementById("id2").value;
			var number=document.getElementById("id1").value;
			var sex=document.getElementById("id3").value;
			
			var trNode=document.createElement("tr");
			
			var tdNode=document.createElement("td");
			var tdnameNode=document.createElement("td");
			var tdnumberNode=document.createElement("td");
			var tdsexNode=document.createElement("td");
			
			if(number !=""&&name !=""&&sex !=""){
				tdnumberNode.appendChild(document.createTextNode(number));
				tdnameNode.appendChild(document.createTextNode(name));
				tdsexNode.appendChild(document.createTextNode(sex));
				aNode = document.createElement("a");
				aNode.setAttribute("href", "javascript:void();");
				aNode.setAttribute("onclick", "del(this)");
				aNode.appendChild(document.createTextNode("删除"));
				tdNode.appendChild(aNode);
				
				trNode.appendChild(tdnumberNode);
				trNode.appendChild(tdnameNode);
				trNode.appendChild(tdsexNode);
				trNode.appendChild(tdNode);
				
				var tableNode = document.getElementById("table");
				
				tableNode.appendChild(trNode);
			}
		}
		
		function del(aNode){
			var tdNode = aNode.parentNode;
			var trNode = tdNode.parentNode;
			var tableNode = trNode.parentNode;
			
			if(confirm("确认删除此条记录吗？"))
				tableNode.removeChild(trNode);			
		}
	</script>
</head>
<body>
	<div id="divname">
		<label>编号：</label>
		<input id="id1" type="text"/>
		<label>姓名：</label>
		<input id="id2" type="text"/>
		<label>性别：</label>
		<input id="id3" type="text"/>
		<input type="button" value="添加" onclick="add()"/>
	</div>
	<h2>学生信息表</h2>
	<table id="table">
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>操作</th>
		</tr>
		<tr>
			<td>001</td>
			<td>马云</td>
			<td>男</td>
			<td><a href="javascript:void();" onclick="del(this)">删除</a></td>
	    </tr>
	</table>
</body>
</html>

这里我碰到的一问题，HTML页面写完以后实在不知道怎么让div居中，反复查反复改，效果都不太好，然后问了我们班一个大佬，好家伙，他让我打开JS代码调试界面，直接在html样式页面改参数，直到div刚好居中为止

附张图：

PS：我是熬夜写的，当时一心想着完成作业了，有很多是copy上课的代码，兄弟们，千万不要学我，作业还是要趁早完成

m0_62435488

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实验五：JavaScript的综合使用二

案例就是一个表格的制作，先用HTML实现界面，功能部分就交给JavaScript话不多说，直接上代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>福布斯中国富豪榜</title> <style> #divname{ width: 727px; margin: 0 auto; } h2{ text-align
复制链接

扫一扫