添加表单

来源:互联网 发布:人工智能行业研究报告 编辑:程序博客网 时间:2024/05/24 22:46
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><script src="jquery-2.1.0.js"></script><script>var arr = new Array(); function dianji(){        var name = $("#nameId").val();        var namespan = $("#nameSpan");        var email = $("#emailId").val();        var emailspan = $("#emailSpan");        var phone = $("#phoneId").val();        var phonespan = $("#phoneSpan");        var flag = true;        /*姓名判断为空*/        if(name == null || name=="")        {            namespan.html("姓名不能为空!");            flag=false;        }else        {            namespan.html("");        }        /*邮箱判断不为空*/        if(email == null || email=="")        {            emailspan.html("邮箱不能为空!");            flag = false;        }else        {            emailspan.html("");        }        /*电话不能为空只能是11位*/        if(phone == null || phone=="" )        {            phonespan.html("电话不能为空!");            flag = false;        }else        {            phonespan.html("");            if(phone.length==11)            {                    phonespan.html("");            }else            {                phonespan.html("必须11位!")    ;                flag = false;            }        }        if(flag)        {             arr.push(new Array(name,email,phone));            var tab = document.getElementById("tab");            tab.innerHTML="<tr><td>姓名</td><td>邮箱</td><td>电话</td><td>操作</td></tr>";           $(arr).each(function(index){               tab.innerHTML +="<tr><td>"+this[0]+"</td><td>"+this[1]+"</td><td>"+this[2]+"</td><td><a href='#' onclick='shan("+index+")'>delete</a></td></tr>";                  });        }     }     function shan(index){           arr.splice(index,1);           var ta = $("#tab");           tab.innerHTML="<tr><td>姓名</td><td>邮箱</td><td>电话</td><td>操作</td></tr>";           $(arr).each(function(index){               tab.innerHTML +="<tr><td>"+this[0]+"</td><td>"+this[1]+"</td><td>"+this[2]+"</td><td><a href='#' onclick='shan("+index+")'>delete</a></td></tr>";                  });         }</script><body>姓名:<input type="text"  id="nameId"/><span id="nameSpan"></span><br/>email:<input type="text" id="emailId"/><span id="emailSpan"></span><br/>电话:<input type="text" id="phoneId"/><span id="phoneSpan"></span><br/><input type="button"  onclick="dianji()" value="提交"/><br/><table border="1" id="tab">  <tr>    <td>姓名</td>    <td>邮箱</td>    <td>电话</td>    <td>delete</td>  </tr></table></body></html>