<!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> |
用JS-appendChild实现学生信息录入
最新推荐文章于 2024-01-15 19:23:49 发布