<!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=gb2312" />
<title>无标题文档</title>
</head>
<body>
模拟添加/删除用户:<br>
姓名: <input type="text" name="name" id="name" />
email: <input type="text" name="email" id="email" />
电话: <input type="text" name="tel" id="tel" />
<button id="addUser">提交</button>
<table id="usertable" border="1" cellpadding="5" cellspacing=0 width="600">
<tbody>
<tr>
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th>操作</th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="#">Delete</a></td>
</tr>
</tbody>
</table>
<script language="JavaScript">
//dom结构绘制完毕,页面的所有关联的文件必须加载完毕(图片)
window.onload=function(){
//<button id="addUser">提交</button>
document.getElementById("addUser").onclick=function(){
/******************************************************************************************************/
//获取文本框的值
/*
* 姓名: <input type="text" name="name" id="name" />
email: <input type="text" name="email" id="email" />
电话: <input type="text" name="tel" id="tel" /><br><br>
*/
var nameValue=document.getElementById("name").value;
var emailValue=document.getElementById("email").value;
var telValue=document.getElementById("tel").value;
/******************************************************************************************************/
//创建td
/*
* <tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=Tom">Delete</a></td>
</tr>
*/
//创建nametd
var nameTd=document.createElement("td");
var nameText=document.createTextNode(nameValue);
nameTd.appendChild(nameText);
//创建emailtd
var emailTd=document.createElement("td");
var emailText=document.createTextNode(emailValue);
emailTd.appendChild(emailText);
//创建teltd
var telTd=document.createElement("td");
var telText=document.createTextNode(telValue);
telTd.appendChild(telText);
//创建atd
var aTd=document.createElement("td");
var aElement=document.createElement("a");
aElement.setAttribute("href","deleteEmp?id="+nameValue);
var deleteText=document.createTextNode("Delete");
aElement.appendChild(deleteText);
aTd.appendChild(aElement);
/******************************************************************************************************/
//创建tr
var trElement=document.createElement("tr");
//增加td到tr上
trElement.appendChild(nameTd);
trElement.appendChild(emailTd);
trElement.appendChild(telTd);
trElement.appendChild(aTd);
/******************************************************************************************************/
//增加tr到table上
//<table id="usertable" border="1" cellpadding="5" cellspacing=0>
//<tbody>
var tableElement=document.getElementById("usertable");
//创建tbody,为了跨浏览器,要创建tbody
var tbodyElement=document.createElement("tbody");
tbodyElement.appendChild(trElement);
//放置tbody到table上
tableElement.appendChild(tbodyElement);
/******************************************************************************************************/
//删除
aElement.onclick=function(){
//使网页的链接失效
return delTr(aElement);
}
/******************************************************************************************************/
}
}
/**
* @param {Object} aElement
*/
function delTr(aElement){
/*
* <tr>
<td>
Tom
</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=Tom">Delete</a></td>
</tr>
*/
var name=aElement.parentNode.parentNode.firstChild.firstChild.nodeValue;
//alert("name "+name)
var flag=window.confirm("您真的要删除["+name+"]这个用户吗?");
//alert(flag);
// 点击"取消" 按钮
if(!flag){
//使网页的链接失效
return false;
}
//删除
//获取tbody
var tbodyElement=aElement.parentNode.parentNode.parentNode;
//获取tr
var trElement=aElement.parentNode.parentNode;
//删除
tbodyElement.removeChild(trElement);
//使网页的链接失效
return false;
}
</script>
<hr/>
您的爱好很广泛!!!
<br>
<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
<br>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
<br>
<input type="button" name="checkall" id="checkall" value="全选" />
<input type="button" name="checkall" id="checkallNo" value="全不选" />
<input type="button" name="checkall" id="check_revsern" value="反选" />
<script language="JavaScript">
window.onload=function(){
//<input type="button" name="checkall" id="checkall" value="全选" />
document.getElementById("checkall").onclick=function(){
var itemElements=document.getElementsByName("items");
for(var i=0;i<itemElements.length;i++){
//方法一: <input type="checkbox" name="items" value="足球" />足球
//itemElements[i].setAttribute("checked","checked");
//方法二
itemElements[i].checked="checked";
}
}
//<input type="button" name="checkall" id="checkallNo" value="全不选" />
document.getElementById("checkallNo").onclick=function(){
var itemElements=document.getElementsByName("items");
for (var i = 0; i < itemElements.length; i++) {
var itemElement=itemElements[i];
//方法一,IE行,其他的不行
//itemElement.setAttribute("checked",null);
//方法二: 都行
itemElement.checked=null;
}
}
//<input type="button" name="checkall" id="check_revsern" value="反选" />
document.getElementById("check_revsern").onclick=function(){
var itemElements=document.getElementsByName("items");
for (var i = 0; i < itemElements.length; i++) {
var itemElement = itemElements[i];
//itemElement.checked:如果选中为true,否则false
if(itemElement.checked){
itemElement.checked=null;
}else{
itemElement.checked="checked";
}
}
}
//<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
document.getElementById("checkItems").onclick=function(){
//alert(this.checked);
var itemElements=document.getElementsByName("items");
for (var i = 0; i < itemElements.length; i++) {
var itemElement = itemElements[i];
if(this.checked){
itemElement.checked="checked";
}else{
itemElement.checked=null;
}
}
}
}
</script>
<hr/>
<form method="post" name="myform">
<table border="0" width="300">
<tr>
<td width="40%">
<select style="WIDTH:100%" multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="山东">山东</option>
<option value="安徽">安徽</option>
<option value="重庆">重庆</option>
<option value="福建">福建</option>
<option value="甘肃">甘肃</option>
<option value="广东">广东</option>
<option value="广西">广西</option>
<option value="贵州">贵州</option>
<option value="海南">海南</option>
<option value="河北">河北</option>
<option value="黑龙江">黑龙江</option>
</select>
</td>
<td width="20%" align="center">
<input type="button" value="-->添加" onclick="moveOption(document.myform.list1, document.myform.list2)">
<br/>
<input type="button" value="==>全添" onclick="moveAllOption(document.myform.list1, document.myform.list2)">
<br/>
<input type="button" value="<--删除" onclick="moveOption(document.myform.list2, document.myform.list1)">
<br/>
<input type="button" value="<==全删" onclick="moveAllOption(document.myform.list2, document.myform.list1)">
</td>
<td width="40%">
<select style="WIDTH:100%" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)">
</select>
</td>
<td>
<button onclick="changepos(document.myform.list2,-1)" type="button">上移</button>
<br/>
<button onclick="changepos(document.myform.list2,1)" type="button">下移</button>
</td>
</tr>
</table>
值：<input type="text" name="city" size="40">
</form>
<script language="JavaScript">
<!--
function moveOption(e1, e2){
try{
for(var i=0;i<e1.options.length;i++){
if(e1.options[i].selected){
var e = e1.options[i];
e2.options.add(new Option(e.text, e.value));
e1.remove(i);
i=i-1
}
}
document.myform.city.value=getvalue(document.myform.list2);
}
catch(e){}
}
function moveAllOption(e1, e2){
try{
for(var i=0;i<e1.options.length;i++){
var e = e1.options[i];
e2.options.add(new Option(e.text, e.value));
e1.remove(i);
i=i-1
}
document.myform.city.value=getvalue(document.myform.list2);
}
catch(e){}
}
function getvalue(geto){
var allvalue = "";
for(var i=0;i<geto.options.length;i++){
allvalue +=geto.options[i].value + ",";
}
return allvalue;
}
function changepos(obj,index){
alert(obj.selectedIndex);
if(index==-1){
if (obj.selectedIndex>0){
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1))
}
}else if(index==1){
if (obj.selectedIndex<obj.options.length-1){
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1)) ;
alert(obj.selectedIndex);
}
}
}
//-->
</script>
<hr/>
级联菜单：
<form name="m">
<select name="p" onchange="choose()">
<option value="0" selected>--省份--</option>
<option value="1">广东</option>
<option value="2">山东</option>
</select>
<select name="city">
<option value="0">--城市--</option>
</select>
</form>
<script language="javaScript">
var dt = new Array(); // 模拟的测试数据
dt[0] = new Array('0','--请先选择省份--');
var gd = new Array();
gd[0] = new Array('0','广州');
gd[1] = new Array('1','深圳');
gd[2] = new Array('2','中山');
var sd = new Array();
sd[0] = new Array('0','济南');
sd[1] = new Array('1','青岛');
sd[2] = new Array('2','威海');
function showCity(pe){ // 动态加载1级菜单
for (var i=0;i<pe.length;i++){
document.m.city.options[i] = new Option(pe[i][1],pe[i][0]);
}
}
function choose(){ // 动态加载2级菜单
var tag = document.m.p.value;
switch(tag){
case '0': init(); showCity(dt); break;
case '1': init(); showCity(gd); break;
case '2': init(); showCity(sd); break;
}
}
function init(){ // 初始化2级菜单
var len = document.m.city.options.length;
for(var i=0;i<len;i++){
document.m.city.remove(i);
}
}
function flush(){ // 解决页面刷新,初始化1级菜单
document.m.p.options[0].selected=true ;
}
</script>
<hr/>
<p>员工信息录入</p>
<form name="empForm" id="empForm" method="post" action="user.html">
<table border=1>
<tr>
<td>真实姓名(不能为空 ,没有其他要求)</td>
<td><input type="text" id="realname" name="realname" />
</td>
</tr>
<tr>
<td>登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</td>
<td><input type="text" id="username" name="username" /></td>
</tr>
<tr>
<td>密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
<td><input type="password" id="psw" name="psw" style="120px" /></td>
</tr>
<tr>
<td>重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
<td><input type="password" id="psw2" name="psw2" style="120px" /></td>
</tr>
<tr>
<td>性别(必选其一)</td>
<td>
<input type="radio" id="gender_male" value="m" name="gender"/>男
<input type="radio" id="gender_female" value="f" name="gender"/>女
</td>
</tr>
<tr>
<td>身份证(15或18为)</td>
<td><input type="text" id="cart" name="cart" size=20 value="" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="button" name="ok" id="ok" value="保存" ></td>
</tr>
</table>
</form>
</body>
<script language="JavaScript">
window.onload=function(){
document.getElementById("ok").onclick=function(){
/****************************************************************************************************/
/*
* <tr>
<td>真实姓名(不能为空 ,没有其他要求)</td>
<td><input type="text" id="realname" name="realname" />
</td>
</tr>
*/
var realnameValue=document.getElementById("realname").value;
//alert("realnameValue"+ltrim(rtrim(realnameValue))+"realnameValue")
if(ltrim(rtrim(realnameValue))==""||realnameValue==null||realnameValue==undefined){
alert("真实姓名不能为空");
document.getElementById("realname").focus();
return false;
}
/****************************************************************************************************/
/*
* <tr>
<td>登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</td>
<td><input type="text" id="username" name="username" /></td>
</tr>
*/
var usernameValue=document.getElementById("username").value;
if(ltrim(rtrim(usernameValue))==""||usernameValue==null||usernameValue==undefined){
alert("登录名不能为空");
document.getElementById("username").focus();
return false;
}
//验证长度在5-8之间,字符包括[字母 数字 中文]
var pattern=/^[_0-9a-zA-Zu4e00-u9fa5]{5,8}$/;
var flag=pattern.test(ltrim(rtrim(usernameValue)));
if(!flag){
alert("登录名长度在5-8之间,");
document.getElementById("username").focus();
return false;
}
/****************************************************************************************************/
// /*
// * <tr>
// <td>密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
// <td><input type="password" id="psw" name="psw" style="120px" /></td>
// </tr>
// */
var pswValue=document.getElementById("psw").value;
if(ltrim(rtrim(pswValue))==""||pswValue==null||pswValue==undefined){
alert("密码不能为空");
document.getElementById("psw").focus();
return false;
}
//长度6-12字符或数字,不能包含中文字符
//使用文本格式定义正则表达式,字符0-128之间
//var pattern=/^[0-9a-zA-Z]{6,12}$/;
//注意 d形式的正则,如果使用文本格式不用加转义字符.如果使用构造函数定义,则要加转义字符
//var pattern=/^[da-zA-Z]{6,12}$/;
//使用构造函数定义正则表达式,，没有字符限制
var pattern=new RegExp("^[0-9a-zA-Z]{6,12}$");
var pattern=new RegExp("^[\da-zA-Z]{6,12}$");
var flag=pattern.test(ltrim(rtrim(pswValue)));
if(!flag){
alert("长度6-12字符或数字,不能包含中文字符");
document.getElementById("psw").focus();
return false;
}
// **************************************************************************************************
// * <tr>
// <td>重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
// <td><input type="password" id="psw2" name="psw2" style="120px" /></td>
// </tr>
//
var psw2Value=document.getElementById("psw2").value;
if(pswValue!=psw2Value){
alert("两次密码输入的不一致");
document.getElementById("psw2").focus();
return false;
}
/****************************************************************************************************/
/*
* <tr>
<td>性别(必选其一)</td>
<td>
<input type="radio" id="gender_male" value="m" name="gender"/>男
<input type="radio" id="gender_female" value="f" name="gender"/>女
</td>
</tr>
*/
var flag=false;
var genderElements=document.getElementsByName("gender");
for(var i=0;i<genderElements.length;i++){
if(genderElements[i].checked){
flag=true;
}
}
if(!flag){
alert("您没有第三种性别可选");
return false;
}
/****************************************************************************************************/
/*
* <tr>
<td>身份证(15或18为)</td>
<td><input type="text" id="cart" name="cart" size=20 value="" /></td>
</tr>
*/
var cartValue=document.getElementById("cart").value;
if (ltrim(rtrim(cartValue)) == "" || cartValue == null || cartValue == undefined) {
alert("身份证不能为空");
document.getElementById("cart").focus();
return false;
}
var len=cartValue.length;
if(len!=15&&len!=18){
alert("您的身份证位数输入有误");
document.getElementById("cart").focus();
return false;
}
//验证15位的身份证
if(len==15){
var pattern=/^d{15}$/;
var flag=pattern.test(cartValue);
if(!flag){
alert("您的15位的身份证格式输入有误");
document.getElementById("cart").focus();
return false;
}
}
//验证18位的身份证
if(len==18){
var pattern=/^d{18}|d{17}[X]{1}$/;
var flag=pattern.test(cartValue);
if(!flag){
alert("您的18位的身份证格式输入有误");
document.getElementById("cart").focus();
return false;
}
}
/****************************************************************************************************/
document.forms[0].submit();
}
}
/**
* 去掉左端的空格
* ***zhu
* **zhu
* *zhu
* zhu
*
*/
function ltrim(str){
while(str.charAt(0)==" "){
str=str.substring(1,str.length);
ltrim(str);
}
return str
}
/**
* 去掉右端的空格
* zhu***
*
*
*/
function rtrim(str){
while(str.charAt(str.length-1)==" "){
str=str.substring(0,str.length-1);
rtrim(str);
}
return str
}
</script>
<hr/>
<hr/>
<hr/>
</body>
</html>JavaScript学习笔记
JavaScript学习笔记，可直接另存为html