hackiller
- 浏览: 18452 次
- 性别:
- 来自: 湖南
-
最新评论
-
hackiller：
liuyes 写道打开eclipse\configuratio ...
Subclipse中文翻译太烂了，转成e文显示 -
liuyes：
打开eclipse\configuration\config. ...
Subclipse中文翻译太烂了，转成e文显示 -
shellfish：
要是非得中文的话，可以修改一下_zh也可以吧。
Subclipse中文翻译太烂了，转成e文显示 -
songjingjing520：
哈哈哈哈~~~~~~~~
J2EE复习(三)JavaScript(下)--实战应用 -
peacherdiy：
哥们，怎么也不搞个下载， 你想 让 同行 粘 死啊！
J2EE复习(三)JavaScript(下)--实战应用
动态增删改Table表格
一、用js做的表格动态增删查改
工具JavaScript：util.js
//全选反选
function checkAll(boxName) {
var checkBox = document.getElementsByName(boxName);
for (i = 0; i < checkBox.length; i++) {
var checked = checkBox[i].checked;
if (checked) {
checkBox[i].checked = false;
} else {
checkBox[i].checked = true;
}
}
}
//多选验证
function multiCheck(idArray)
{
//var idArray = document.getElementsByName(boxName);
var count = 0;
for(i=0;i<idArray.length;i++)
{
if(idArray[i].checked)
{
count++;
}
}
return count;
}
//回车切换焦点
function toNext(next)
{
if(event.keyCode==13)
{
next.focus();
}
}
//打开右键菜单
function openShortCutMenu(oRow)
{
// 选中当前行
SelectRow(oRow);
aOpenPopMenu("ShortCutMenu");
event.cancelBubble = true;
event.returnValue = false;
}
//关闭右键菜单
function CloseShortCutMenu(){
aClosePopMenu("ShortCutMenu");
}
//显示右键菜单
function aOpenPopMenu(MenuId){
if (document.all(MenuId)){
document.all(MenuId).style.left = event.clientX + document.body.scrollLeft;
document.all(MenuId).style.top = event.clientY + document.body.scrollTop;
document.all(MenuId).style.display = "";
}
}
//隐藏右键菜单
function aClosePopMenu(MenuId){
if (document.all(MenuId)){
document.all(MenuId).style.display = "none";
}
}
学生信息管理主页studentInfo.html
<html>
<head>
<title>学生信息</title>
<script type="text/javascript" src="util.js"></script>
<script>
//显示更新学生信息模态窗体
function showDialog()
{
var result = window.showModalDialog("dialog.html",null,"dialogWidth=400px;dialogHeight=400px;");
if(result&&result.length!=0&&result[0]!="")
{
addRow(result);
}
}
//添加一行学生信息
function addRow(result)
{
var doc = window.listFrame.document;//内嵌框架的document对象
var tb = doc.getElementById("stuTable");//学生信息表格
var tbody = doc.getElementById("mytbody");
//创建新的行
var tr = doc.createElement("<tr onClick='SelectRow(this)' ondblclick='update();' oncontextmenu='openShortCutMenu(this)' title='右键修改'>");
//创建行的第一个单元格中的多选框
var check = document.createElement("<input name='idArray' type='checkbox'>");
var td = document.createElement("td");
td.appendChild(check);
tr.appendChild(td);
//将模式窗体传过来的值添加到新行中
for(i=0;i<result.length;i++)
{
var td = document.createElement("td");
td.appendChild(document.createTextNode(result[i]));
tr.appendChild(td);
}
tbody.appendChild(tr);
}
//删除学生信息
function delStudent()
{
var checks = window.listFrame.document.getElementsByName("idArray");
var count = multiCheck(checks);
if(count==0) {alert("未选中任何选项！"); return;}
if(window.confirm("确定要删除这"+count+"条信息吗？"))
{
while(count>0)
{
var tb = window.listFrame.document.getElementById("stuTable");
var checks = window.listFrame.document.getElementsByName("idArray");
for(i=0;i<checks.length;i++)
{
if(checks[i].checked)
{
tb.deleteRow(checks[i].parentElement.parentElement.rowIndex);
count--;
break;
}
}
}
}
}
//修改学生信息
function update()
{
var CurrRow = window.listFrame.CurrRow;
if(CurrRow&&CurrRow.cells.length>0)
{
var values = new Array();
for(i=0;i<CurrRow.cells.length-1;i++)
{
values[i] = CurrRow.cells[i+1].innerText;
}
values[values.length] = CurrRow;//将修改的当前行传给模式窗体进行修改
var result = window.showModalDialog("dialog.html",values,"dialogWidth=400px;dialogHeight=400px;");
}else
{
alert("请选中要修改的行");
}
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onselectstart="return false;">
<table border="0" cellpadding="0" cellspacing="0" width="100%"
height="95%">
<tr>
<td width="100%" height="100%" valign="top">
<IFRAME width="100%" id="listFrame" height="100%" border=0
frameBorder=1 name="listFrame" src="list.html"></IFRAME>
</td>
</tr>
<tr>
<td width="100%" align="center" colspan="2">
<input class="btn_70" type="button" value="刷 新" id="btRefresh"
onclick="listFrame.location.reload();">
  
<input class="btn_70" type="button" value="删 除" id="btDel"
onclick="delStudent();">
  
<input class="btn_70" type="button" value="添 加" id="btAdd"
onclick="showDialog();">
  
<input type="button" Class="btn_70" value="修 改" name="btModify"
onclick="update();">
  
</td>
</tr>
</table>
</body>
</html>
学生信息列表页面(list.html)，此页面内嵌在studentInfo.html中
<html>
<head>
<title>学生信息列表</title>
<script type="text/javascript" src="util.js"></script>
<script>
// 当前行对象变量
var CurrRow = null;
// 选定表格行函数
function SelectRow(row)
{
// 如果有曾选定过的行, 则恢复此行为未选定状态
if(CurrRow)
{
CurrRow.style.backgroundColor="";
}
// 设置新的选定行的状态
row.style.backgroundColor = '#D9F5FF';
// 前新的行赋给 当前行变量
CurrRow = row;
}
//更新学生信息
function update()
{
var values = new Array();
for(i=0;i<CurrRow.cells.length-1;i++)
{
values[i] = CurrRow.cells[i+1].innerText;
}
values[values.length] = CurrRow;//将修改的当前行传给模式窗体进行修改
var result = window.showModalDialog("dialog.html",values,"dialogWidth=400px;dialogHeight=400px;");
}
</script>
</head>
<body onmousedown="CloseShortCutMenu()">
<table border="1" width="100%" bordercolor="#666666" cellspacing="0" id="stuTable"
style="border-collapse: collapse" cellpadding="2" align="center">
<caption>07级学生信息列表</caption>
<tbody id="mytbody">
<tr class="th">
<td><input type="checkbox" onclick="checkAll('idArray');">[全选/反选]</td>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>学校</td>
<td>手机</td>
</tr>
<tr onClick="SelectRow(this)" ondblclick="update();" oncontextmenu="openShortCutMenu(this)" title="右键修改">
<td><input name="idArray" type="checkbox"></td>
<td>430901</td>
<td>hackiller</td>
<td>男</td>
<td>21</td>
<td>中南林业科技大学涉外学院</td>
<td>12345678901</td>
</tr>
</tbody>
</table>
<div id="ShortCutMenu" style="position: absolute; left: -200px; top: -200px; width: 120px; z-index: 999; display: none">
<table border="0" width="120" style="border-collapse: collapse; border: 2 outset #AEA67C" cellspacing="0" cellpadding="4" bgcolor="#EBF5FF">
<tr style="cursor: default" onmouseover="this.bgColor='#ADCFFF'" onmouseout="this.bgColor=''" onmousedown="update();">
<td width="90">修改</td>
</tr>
</table>
</div>
</body>
</html>
更新学生信息对话框页面(dialog.html)，用于添加和修改表格
<html>
<head>
<title>更新学生信息</title>
<script type="text/javascript" src="util.js"></script>
<script>
var arg = window.dialogArguments;
function updateInfo()
{
var stuValues = getStuValues();
if(!arg)
{
window.returnValue = stuValues;
}else
{
for(i=0;i<stuValues.length;i++)
{
arg[arg.length-1].cells[i+1].innerText=stuValues[i];
}
}
window.close();
}
//取消更新
function cancle()
{
window.close();
}
//初始化
function init()
{
if(arg)
{
setStuValues(arg);
}
}
//获取学生信息
function getStuValues()
{
var tb = document.getElementById("stuInfoTb");
var stuValues = new Array(6);
for(i=0;i<6;i++)
{
//获取表格中每一行第2个单元格中的元素的值，即学生信息
stuValues[i] = tb.rows[i].cells[1].children[0].value;
}
var female = tb.rows[2].cells[1].children[1];
if(female.checked) stuValues[2]='女';
else stuValues[2]='男';
return stuValues;
}
//设置学生信息初始值
function setStuValues(stuValues)
{
var tb = document.getElementById("stuInfoTb");
for(i=0;i<6;i++)
{
//获取表格中每一行第2个单元格中的元素的值，即学生信息
var elem = tb.rows[i].cells[1].children[0];
elem.value = stuValues[i];
}
var female = tb.rows[2].cells[1].children[1];
if(stuValues[2]=='女') female.checked=true;
}
</script>
</head>
<body>
<table align="center" style="margin-top: 10%;" id="stuInfoTb">
<tr>
<td>学号</td>
<td><input type="text" id="stuID" name="stuID" onkeypress="toNext(stuName);"></td>
</tr>
<tr>
<td>姓名</td>
<td><input type="text" id="stuName" name="stuName" maxlength="20" onkeypress="toNext(stuAge);"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" id="male" name="stuSex" value="男" checked="checked">男
<input type="radio" id="female" name="stuSex" value="女">女
</td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" id="stuAge" name="stuAge" maxlength="2"
onkeypress="toNext(stuSchool);" onkeyup="this.value=this.value.replace(/\D/g,'');">
</td>
</tr>
<tr>
<td>学校</td>
<td><input type="text" id="stuSchool" name="stuSchool" maxlength="50" onkeypress="toNext(stuMobile);"></td>
</tr>
<tr>
<td>手机</td>
<td><input type="text" id="stuMobile" name="stuMobile" maxlength="50" onkeypress="if(event.keyCode==13) updateInfo();"></td>
</tr>
<tr align="center"><td colspan="2">
<input type="button" class="btn_70" value="确定" onclick="updateInfo();">
<input type="button" class="btn_70" value="取消" onclick="cancle();">
</td></tr>
</table>
<script>init();</script>
</body>
</html>
二、在学习和做项目过程中写的JavaScript验证函数(正则表达式)
//身份证合法性
function isIdentity(new_num)
{
var num = new_num;
var len = num.length ;
var re ;
if (len == 15)
{
if (isNaN(num)) {alert("输入的不是数字！"); return false;}
}
if (len == 15)
re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/);
else if (len == 18)
re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d|[X])$/);
else { alert("输入的数字位数不对！"); return false;}
var a = num.match(re);
if (a != null)
{
if (len==15)
{
var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);
var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
}
else
{
var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);
var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
}
if (!B) {alert("输入的身份证号 "+ a[0] +" 里出生日期不对！"); return false;}
}else
{
alert("输入的身份证号不对！");
return false;
}
return true;
}
//电子邮箱的合法性
function checkemail(email)
{
var myReg = /^([-_A-Za-z0-9\.]+)@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;
if(!myReg.test( email ))
{
alert("请输入合法的电子邮件地址");
return false;
}
return true;
}
//验证邮政编码
function checkPostcode(postcode)
{
var reobj = new RegExp(/^\d+$/);
if(!reobj.test(postcode)||!postcode.length!=6)
{
alert("请输入正确的邮政编码");
return false;
}
return true;
}
//价格验证
function checkPrice(price)
{
var float = /^\d+(.){0,1}?\d{0,2}$/;//两位小数
var int = /^[1-9]\d*$/;//正整数
if(!float.test(price)&&!int.test(price))
{
alert("请输入正确的商品价格");
return false;
}
return true;
}
//验证上传图片类型
function valiImgType(fileName)
{
var extension = fileName.substring(fileName.lastIndexOf(".")+1,fileName.length).toLowerCase();
if(extension!="jpg"&&extension!="gif")
{
alert("请选择jpg或gif格式的图片");
return false;
}
return true;
}
//验证是否为中文
function iszhCN(name)
{
var Expression=/[^\u4E00-\u9FA5]/;
var objExp=new RegExp(Expression);
if(!/^[\u4e00-\u9fa5]+$/.test(name))
{
alert("请输入汉字,验证未通过");
return false;
}
return true;
}
//验证IP地址
function checkIP(sIPAddress)
{
var exp=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
var reg = sIPAddress.match(exp);
var ErrMsg="你输入的是一个非法的IP地址段！\nIP段为：:xxx.xxx.xxx.xxx（xxx为0-255)！"
if(reg==null)
{
alert(ErrMsg);
return false;
}
return true;
}
三、在学习和做项目过程中写的常用JavaScript函数
//四舍五入,保留valiNumber个小数；
function round(number,valiNumber)
{
document.write(number.toFixed(valiNumber));
}
// 判断字符串长度，一个中文按两个字符算
function strlen(str)
{
var len;
var i;
len = 0;
for (i=0;i<str.length;i++)
{
if (str.charCodeAt(i)>255) len+=2; else len++;
}
return len;
}
四、用JavaScript限制html输入框为整数
<!-- 第一种 -->
<input onkeypress="return event.keyCode>=48&&event.keyCode<=57"
onpaste="var s=clipboardData.getData('text'); if(!/\D/.test(s)) value=s.replace(/^0*/,'');return false;"
onkeyup="if(/(^0+)/.test(value))value=value.replace(/^0*/, '')" />
<!-- 第二种 -->
<input type="text" onkeyup="this.value=this.value.replace(/\D/g,'');">
分享到：
发表评论
-
J2EE复习(七)JSTL(JSP标准标签库)
2009-04-14 12:45 1129在学习JSLT时找到的比较 ... -
J2EE复习(六)JSP自定义标签
2009-04-14 11:50 1359一、JSP自定义标签简介 ... -
J2EE复习(五)JSP基础
2009-04-12 20:42 1114一、JSP简介JSP (Java Server Pages)是 ... -
J2EE复习(四)servlet
2009-04-12 11:07 1358一、什么是Servlet？Servlet 是在服务器上运行来响 ... -
J2EE复习(三)JavaScript(上)--基础入门
2009-04-11 14:47 1125就我个人在学习和使用J ... -
J2EE复习(二)XML(下)--xml解析
2009-04-11 14:37 1063xml的四种解析方法及源代码(SAX、DOM、JDOM、DOM ... -
J2EE复习(二)XML(上)
2009-04-11 14:24 1109XML（eXtensible Markup Languag ... -
J2EE复习(一)HTML
2009-04-11 14:07 1030HTML(Hypertext Markup Language) ...
相关推荐
轻量级J2EE企业应用实战--Struts+Spring+Hibernate整合开发笔记
中文版EXPERT-ONE-ON-ONE-J2EE-DEVELOPMENT-WITHOUT-EJB.part2.rar
《轻量级J2EE企业应用实战--Struts+Spring+Hibernate整合开发》图书配套源码part1
轻量级J2EE企业应用实战--Struts+Spring+Hibernate整合开发 part2
《轻量级J2EE企业应用实战--Struts+Spring+Hibernate整合开发》源码.part6
《轻量级J2EE企业应用实战--Struts+Spring+Hibernate整合开发》电子书.part3.rar
《轻量级J2EE 企业应用实战--Struts+Spring+Hibernate 整合开发》源代码
seasar2\lib\geronimo-j2ee_1.4_spec-1.0.jar 主框架中lib下面的一个文件，由于上传能力太小，只好分开传了
从J2EE的概念说起，到它的优势，到J2EE典型的四层模型，和它的框架结构，最后是J2EE十三 种核心技术的一个简介。本文分门别类的对J2EE中的服务，组件，层次，容器，API都做了比较详细的介绍，相信看完此文，读者会...
深入掌握J2EE技术----多个教程，够你用的。
j2ee-1_4-api
《轻量级J2EE企业应用实战--Struts+Spring+Hibernate整合开发》源码.part1
《轻量级J2EE企业应用实战--Struts+Spring+Hibernate整合开发》源码.part4
《轻量级J2EE企业应用实战--Struts+Spring+Hibernate整合开发》源码.part3
《轻量级J2EE企业应用实战--Struts+Spring+Hibernate整合开发》源码.part2
《轻量级J2EE企业应用实战--Struts+Spring+Hibernate整合开发》源码.part8
《轻量级J2EE企业应用实战--Struts+Spring+Hibernate整合开发》源码.part10
《轻量级J2EE企业应用实战--Struts+Spring+Hibernate整合开发》源码.part9
《轻量级J2EE企业应用实战--Struts+Spring+Hibernate整合开发》源码.part7