首页 > 代码库 > 使用文档对象在页面上创建学生信息表。 信息表包括学号、姓名、性别、电子邮件、联系电话、个人主页和联系地址， 信息表内容通过表单输入，提交前先使用正则表达式进行验证，联系地址不能超过20个字符， 每输入一名学生的信息，提交后，表格增加一行，表格不能被选择、复制。
使用文档对象在页面上创建学生信息表。 信息表包括学号、姓名、性别、电子邮件、联系电话、个人主页和联系地址， 信息表内容通过表单输入，提交前先使用正则表达式进行验证，联系地址不能超过20个字符， 每输入一名学生的信息，提交后，表格增加一行，表格不能被选择、复制。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
描述：使用文档对象在页面上创建学生信息表。
信息表包括学号、姓名、性别、电子邮件、联系电话、个人主页和联系地址，
信息表内容通过表单输入，提交前先使用正则表达式进行验证，联系地址不能超过20个字符，
每输入一名学生的信息，提交后，表格增加一行，表格不能被选择、复制。
-->
<body style="text-align: center; background:url(img/3.1.jpg);background-size: 100%;">
<div style="padding-top: 20px; font-family: ‘楷体‘;">
<form >
学 号：<input type="text" id="userName" ><br><br>
姓 名：<input type="text" id="userPass"><br><br>
性 别：
男<input type="radio" name="xingbie" value="http://www.mamicode.com/男">
女<input type="radio" name="xingbie" value="http://www.mamicode.com/女"> <br><br>
电子邮箱：<input type="text" id="Email" ><br><br>
联系电话：<input type="text" id="photo" ><br><br>
个人主页：<input type="text" id="net" ><br><br>
联系地址：<br>
<textarea id="ztext" style="width: 220px;"></textarea><br><br>
<input style="width: 230px;" type="button" value="http://www.mamicode.com/提交" onclick="doSubmit()">
</form>
<br><br>
<table style="-moz-user-select:none; width:500px;" border="0" align="center" id="TableA">
<thead>
<tr>
<td>学号</td><td>姓名</td><td>性别</td><td>电子邮箱</td><td>联系电话</td><td>个人主页</td><td>联系地址</td>
</tr>
</thead>
</table>
</div>
<script>
//获取ID值
var Email=document.getElementById("Email")
var photo=document.getElementById("photo")
var net=document.getElementById("net")
var ztext=document.getElementById("ztext")
var userName=document.getElementById("userName")
var userPass=document.getElementById("userPass")
//添加表格
var a=true;
function doSubmit(){
yz();
if(a==true){
var radio = document.getElementsByName("xingbie");
var row = document.getElementById("TableA").insertRow();
if(row!=null){
cell=row.insertCell();
cell.innerHTML=userName.value;
cell = row.insertCell();
cell.innerHTML=userPass.value;
cell=row.insertCell();
for (i=0; i<radio.length; i++) {
if (radio[i].checked) {
cell.innerHTML=radio[i].value
}
}
cell = row.insertCell();
cell.innerHTML=Email.value;
cell = row.insertCell();
cell.innerHTML=photo.value;
cell = row.insertCell();
cell.innerHTML=net.value;
cell = row.insertCell();
cell.innerHTML=ztext.value;
}
}
qk();
}
onload=qk()
function qk(){
if(a==true){
userName.value="";
userPass.value=""
Email.value=""
photo.value=""
net.value=""
ztext.value=""
}
}
//验证
function yz(){
var pat=/^[\u4E00-\u9FA5]{0,20}$/;
if(pat.test(ztext.value)==false){
alert("地址不得超过20个汉字！！");
a=false;
}
}
//雪花特效
var num=15;
x= new Array();
y= new Array();
doc_width=document.documentElement.clientWidth;
doc_height=document.documentElement.clientHeight;
for(i=0; i<num; i++){
x[i]=Math.random()*(doc_width-50);
y[i]=Math.random()*doc_height;
str="<img src=http://www.mamicode.com/‘img/snow.png‘ style=‘position:absolute; height:20px;width:20px";
str+="top:"+y[i]+"px;left:"+x[i]+"px;‘id=‘dot"+i+"‘>"
document.write(str);
}
function snow(){
for(i=0;i<num;i++){
x[i]+=Math.random()*3;
x[i]-=Math.random()*3;
y[i]+=5;
if(y[i]>(doc_height-50))
{
y[i]=-20;
}
document.all["dot"+i].style.top=y[i]+"px";
document.all["dot"+i].style.left=x[i]+"px";
}
setTimeout("snow()",10);
}
snow();
</script>
</body>
</html>
使用文档对象在页面上创建学生信息表。 信息表包括学号、姓名、性别、电子邮件、联系电话、个人主页和联系地址， 信息表内容通过表单输入，提交前先使用正则表达式进行验证，联系地址不能超过20个字符， 每输入一名学生的信息，提交后，表格增加一行，表格不能被选择、复制。