<%@ 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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<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)\" οnclick=\"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)\" οnclick=\"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>
<!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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<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)\" οnclick=\"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)\" οnclick=\"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>