首页 > 代码库 > 使用文档对象在页面上创建学生信息表。 信息表包括学号、姓名、性别、电子邮件、联系电话、个人主页和联系地址, 信息表内容通过表单输入,提交前先使用正则表达式进行验证,联系地址不能超过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 >
            学&nbsp;&nbsp;&nbsp;&nbsp;号:<input type="text" id="userName" ><br><br>
             姓&nbsp;&nbsp;&nbsp;&nbsp;名:<input type="text" id="userPass"><br><br>
             性&nbsp;&nbsp;&nbsp;&nbsp;别:
            &nbsp;男<input type="radio" name="xingbie" value="http://www.mamicode.com/男">
            &nbsp;&nbsp;女<input type="radio" name="xingbie" value="http://www.mamicode.com/女">&nbsp;&nbsp;&nbsp;&nbsp;<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个字符, 每输入一名学生的信息,提交后,表格增加一行,表格不能被选择、复制。