jquery表单验证提交删除

来源：互联网发布：wps表格怎么匹配数据编辑：程序博客网时间：2024/05/01 05:14

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP 'Show.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript"
   src="jquery-1.11.0.js"></script>
<script type="text/javascript">
   var arr = new Array();//创建一个数组
   $(function() {//页面加载完成的时候
       var time = $("#timespan");//获取span的元素
       var d = new Date();//创建一个时间对象
       time.html(d.toLocaleTimeString());

       //写一个点击事件
       $("#btn").click(function() {

           var flag = true;
           //获取到元素并判断是否为空
           if ($("#zhid").val() == null || $("#zhid").val() == "") {
               flag = false;
               $("#zhspan").html("不能为空");
           } else {
               $("#zhspan").html("");
           }
           if ($("#pwdid").val().length < 6) {
               flag = false;
               $("#pwdspan").html("长度不能小于6位");
           } else {
               $("#pwdspan").html("");
           }
           if ($("#emailid").val() == null || $("#emailid").val() == "") {
               flag = false;
               $("#emailspan").html("不能为空");
           } else {
               $("#emailspan").html("");
           }

           if(flag){//如果都满足提交条件,flag就为true
           arr.push(new Array($("#zhid").val(),$("#pwdid").val(),$("#emailid").val()));
           var table = $("#tid");
           //遍历前清空
           table.html("<tr><td>账号</td><td>密码</td><td>邮箱</td><td>操作</td></tr>");
           $(arr).each(function(index){
           //遍历过程中把table标签体内容改为这样
           table.append("<tr><td>"+this[0]+"</td><td>"+this[1]+"</td><td>"+this[2]+"</td><td><a href=\"javascript:void(0)\" onclick=\"shan('"+index+"')\">删除</a></td></tr>");

           });

           }

       });

   });
   function shan(index){
   arr.splice(index, 1);
   var table = $("#tid");
           //遍历前清空
           table.html("<tr><td>账号</td><td>密码</td><td>邮箱</td><td>操作</td></tr>");
           $(arr).each(function(index){
           //遍历过程中把table标签体内容改为这样
           table.append("<tr><td>"+this[0]+"</td><td>"+this[1]+"</td><td>"+this[2]+"</td><td><a href=\"javascript:void(0)\" onclick=\"shan('"+index+"')\">删除</a></td></tr>");

           });

   }
</script>

</head>

<body>

   <table align="center" width="31%">
       <tr>
           <td colspan="3" align="center">系统时间 : <span id="timespan"></span>
           </td>
       </tr>
       <tr>
           <td>账号</td>
           <td><input type="text" id="zhid"></td>
           <td><span id="zhspan"></span></td>
       </tr>
       <tr>
           <td>密码</td>
           <td><input type="text" id="pwdid"></td>
           <td><span id="pwdspan"></span></td>
       </tr>
       <tr>
           <td>邮箱</td>
           <td><input type="text" id="emailid"></td>
           <td><span id="emailspan"></span></td>
       </tr>
       <tr>
           <td colspan="3" align="center"><input type="button" id="btn"
               value="添加">
           </td>
       </tr>

   </table>
   <table id="tid" align="center" width="27%">
       <tr>
           <td>账号</td>
           <td>密码</td>
           <td>邮箱</td>
           <td>操作</td>

       </tr>
    </table>
</body>
</html>

阅读全文

0 0