<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>周考1</title>
<script src="jquery-2.1.0.js"></script>
<script>
//点击按钮,验证输入框用户名是否为空
$(function(){
//给按钮添加点击事件
/*$("#sub").click(function(){
var name = $("#name").val();
if(name == null || name == "" ){
alert("用户名不能为空");
}
});*/
//创建p标签
/*var $p = $("<p title='haha'>p标签</p>");
alert($p.html());
$("#mytable").append($p);*/
$("#sub").click(function(){
//拿到用户名、密码、邮箱
var name = $("#name").val();
var pwd = $("#pwd").val();
var email = $("#email").val();
//alert(name);
//创建td标签
var td1 = $("<td>"+name+"</td>");
var td2 = $("<td>"+pwd+"</td>");
var td3 = $("<td>"+email+"</td>");
//创建tr
var tr = $("<tr></tr>");
tr.append(td1);
tr.append(td2);
tr.append(td3);
//将tr插入到tbady中
$("#mytable").append(tr);
});
});
</script>
</head>
<body>
<table>
<caption id="time">系统时间:
</caption>
<tbody>
<tr>
<td>
账号
</td>
<td><input type="text" id="name"/></td>
<td>
不能为空
</td>
</tr>
<tr>
<td>
密码
</td>
<td><input type="password" id="pwd"/></td>
<td>
不能小于6位
</td>
</tr>
<tr>
<td>
邮箱
</td>
<td><input type="text" id="email"/></td>
<td>
不能为空
</td>
</tr>
<tr>
<td align="center" colspan="3">
<input type="button" value="添加" id="sub"/>
</td>
</tr>
</tbody>
</table><br/>
<table>
<tbody id="mytable">
<tr>
<td>
账号
</td>
<td>密码</td>
<td>
邮箱
</td>
</tr>
</tbody>
</table>
</body>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<!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>周考1</title>
</head>
<body>
<table>
<caption id="time">系统时间:
</caption>
<tbody>
<tr>
<td>
账号
</td>
<td><input type="text" id="name"/></td>
<td>
不能为空
</td>
</tr>
<tr>
<td>
密码
</td>
<td><input type="password" id="pwd"/></td>
<td>
不能小于6位
</td>
</tr>
<tr>
<td>
邮箱
</td>
<td><input type="text" id="email"/></td>
<td>
不能为空
</td>
</tr>
<tr>
<td align="center" colspan="3">
<input type="button" value="添加" id="sub" onclick="show()"/>
</td>
</tr>
</tbody>
</table><br/>
<table>
<tbody id="mytable">
<tr>
<td>
账号
</td>
<td>密码</td>
<td>
邮箱
</td>
</tr>
</tbody>
</table>
<script>
var date = new Date();
var time = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
document.getElementById("time").innerHTML = "系统时间:" + time;
//点击按钮验证用户名不为空
function show(){
//方式一:用多重if else判断。麻烦
//方式二:return (false);
//方式三:设置标志位。
var flag = true;
var name = document.getElementById("name").value;
if( name == "" || name == null){
alert("用户名不能为空");
//return;
flag = false;
}
var pwd = document.getElementById("pwd").value;
var size = pwd.length;
if( size<6 ){
alert("密码长度不能小于6");
//return false;
flag = false;
}
var email = document.getElementById("email").value;
if( email == "" || email == null){
alert("邮箱不能为空");
//return;
flag = false;
}
if(flag){
//如果添加成功,将数据做显示
//通过createElement方法创建标签元素,传入一个合法的标签名。
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
//给表格添加内容
td1.innerHTML = name;
td2.innerHTML = pwd;
td3.innerHTML = email;
//将表格添加到tr中
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
//将tr放入表格中做显示
document.getElementById("mytable").appendChild(tr);
}
}
</script>
</body>
</html>