用JS-appendChild实现学生信息录入

最新推荐文章于 2024-01-15 19:23:49 发布

一例沙白

最新推荐文章于 2024-01-15 19:23:49 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/u013086232/article/details/18622617

版权

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>添加学生信息</title>
	<style type="text/css">
	#div-input
	{
	font-size: 13px;
	}
	#div-bottom
	{
	font-size: 15px;
	background-color: #cccccc;
	}
	#div-bottom div div
	{
	width: 150px;
	float: left;
	background-color: #cccccc;
	}

	</style>

	<script type="text/javascript">
	function f1()
	{
	var name=document.getElementById("t-name").value;
	var age=document.getElementById("t-age").value;
	var hobby=document.getElementById("t-hobby").value;
	var address=document.getElementById("t-address").value;
	var tclass=document.getElementById("t-class").value;

	var num =document.getElementById("t-num").value;
	var tellphone =document.getElementById("t-tellphone").value;
	var sex;
	if(document.getElementById("t-sex-male").checked==true)
	{
	sex="男";
	alert(sex);
	}
	else if (document.getElementById("t-sex-female").checked==true)
	{
	sex="女";
	alert(sex);
	}
	else if (document.getElementById("t-sex-nomale").checked==true)
	{
	sex="人妖";
	alert(sex);
	}

	var a=document.createElement("div");
	a.appendChild(document.createTextNode(name));
	var b=document.createElement("div");
	b.appendChild(document.createTextNode(age));
	var c=document.createElement("div");
	c.appendChild(document.createTextNode(hobby));
	var d=document.createElement("div");
	d.appendChild(document.createTextNode(address));
	var e=document.createElement("div");
	e.appendChild(document.createTextNode(tclass));
	var f=document.createElement("div");
	f.appendChild(document.createTextNode(num));
	var g=document.createElement("div");
	g.appendChild(document.createTextNode(tellphone));
	var h=document.createElement("div");
	h.appendChild(document.createTextNode(sex));

	var i= document.createElement("div");

	i.setAttribute("style","clear: both;");
	i.appendChild(a);
	i.appendChild(b);
	i.appendChild(c);
	i.appendChild(d);
	i.appendChild(e);
	i.appendChild(f);
	i.appendChild(g);
	i.appendChild(h);

	document.getElementById("div-bottom").appendChild(i);





	}
	</script>
	</head>
	<body>
	<div id="div-input">
	<h1>学生信息输入</h1>
	学生姓名：
	<input type="text" id="t-name">
	学生年龄：
	<input type="text" id="t-age">
	爱好特长：
	<input type="text" id="t-hobby">
	家庭住址：
	<input type="text" id="t-address"> <br/>
	所在班级：
	<input type="text" id="t-class">
	学生学号：
	<input type="text" id="t-num">
	联系方式：
	<input type="text" id="t-tellphone">

	学生性别：
	<input type="radio" name="t_sex" id="t-sex-male">男
	<input type="radio" name="t_sex" id="t-sex-female">女
	<input type="radio" name="t_sex" id="t-sex-nomale">人妖
	<br/>

	<input type="button" value="确认提交" onclick="f1()">
	</div> <br/><br/><br/>
	<div id="div-bottom">
	<div>
	<div>学生姓名</div>
	<div>学生年龄</div>
	<div>爱好特长</div>
	<div>家庭住址</div>
	<div>所在班级</div>
	<div>学生学号</div>
	<div>联系方式</div>
	<div>学生性别</div>
	</div>
	<div style="clear: both">
	<div>本拉登</div>
	<div>50</div>
	<div>撞大楼</div>
	<div>未知</div>
	<div>恐怖一班</div>
	<div>543543</div>
	<div>对外保密</div>
	<div>男</div>
	</div>
	</div>

	</body>
	</html>

一例沙白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JS-appendChild实现学生信息录入

http-equiv="Content-Type" content="text/html; charset=utf-8" /> 添加学生信息 type="text/css"> #div-input { font-size: 13px; } #div-bottom {
复制链接

扫一扫