B/S开发中常用javaScript技术与代码

时间:2021-05-28

在b/s开发中经常用到的javaScript技术
一、验证类
1、数字验证内
1.1整数
1.2大于0的整数(用于传来的ID的验证)
1.3负整数的验证
1.4整数不能大于iMax
1.5整数不能小于iMin
2、时间类
2.1短时间,形如(13:04:06)
2.2短日期,形如(2003-12-05)
2.3长时间,形如(2003-12-0513:04:06)
2.4只有年和月。形如(2003-05,或者2003-5)
2.5只有小时和分钟,形如(12:03)
3、表单类
3.1所有的表单的值都不能为空
3.2多行文本框的值不能为空。
3.3多行文本框的值不能超过sMaxStrleng
3.4多行文本框的值不能少于sMixStrleng
3.5判断单选框是否选择。
3.6判断复选框是否选择.
3.7复选框的全选,多选,全不选,反选
3.8文件上传过程中判断文件类型
4、字符类
4.1判断字符全部由a-Z或者是A-Z的字字母组成
4.2判断字符由字母和数字组成。
4.3判断字符由字母和数字,下划线,点号组成.且开头的只能是下划线和字母
4.4字符串替换函数.Replace();
5、浏览器类
5.1判断浏览器的类型
5.2判断ie的版本
5.3判断客户端的分辨率

6、结合类
6.1email的判断。
6.2手机号码的验证
6.3身份证的验证


二、功能类

1、时间与相关控件类
1.1日历
1.2时间控件
1.3万年历
1.4显示动态显示时钟效果(文本,如OA中时间)
1.5显示动态显示时钟效果(图像,像手表)
2、表单类
2.1自动生成表单
2.2动态添加,修改,删除下拉框中的元素
2.3可以输入内容的下拉框
2.4多行文本框中只能输入iMax文字。如果多输入了,自动减少到iMax个文字(多用于短信发送)

3、打印类
3.1打印控件
4、事件类
4.1屏蔽右键
4.2屏蔽所有功能键
4.3-->和<--F5F11,F9,F1
4.4屏蔽组合键ctrl+N
5、网页设计类
5.1连续滚动的文字,图片(注意是连续的,两段文字和图片中没有空白出现)
5.2html编辑控件类
5.3颜色选取框控件
5.4下拉菜单
5.5两层或多层次的下拉菜单
5.6仿IE菜单的按钮。(效果如rongshuxa.com的导航栏目)
5.7状态栏,title栏的动态效果(例子很多,可以研究一下)
5.8双击后,网页自动滚屏
6、树型结构。
6.1asp+SQL版
6.2asp+xml+sql版
6.3java+sql或者java+sql+xml
7、无边框效果的制作
8、连动下拉框技术
9、文本排序


一、验证类
1、数字验证内
1.1整数
/^(-|\+)?\d+$/.test(str)
1.2大于0的整数(用于传来的ID的验证)
/^\d+$/.test(str)
1.3负整数的验证
/^-\d+$/.test(str)
2、时间类
2.1短时间,形如(13:04:06)
functionisTime(str)
{
vara=str.match(/^(\d{1,2})(:)?(\d{1,2})\2(\d{1,2})$/);
if(a==null){alert('输入的参数不是时间格式');returnfalse;}
if(a[1]>24||a[3]>60||a[4]>60)
{
alert("时间格式不对");
returnfalse
}
returntrue;
}
2.2短日期,形如(2003-12-05)
functionstrDateTime(str)
{
varr=str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
if(r==null)returnfalse;
vard=newDate(r[1],r[3]-1,r[4]);
return(d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);
}
2.3长时间,形如(2003-12-0513:04:06)
functionstrDateTime(str)
{
varreg=/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})(\d{1,2}):(\d{1,2}):(\d{1,2})$/;
varr=str.match(reg);
if(r==null)returnfalse;
vard=newDate(r[1],r[3]-1,r[4],r[5],r[6],r[7]);
return(d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==r[7]);
}
2.4只有年和月。形如(2003-05,或者2003-5)
2.5只有小时和分钟,形如(12:03)
3、表单类
3.1所有的表单的值都不能为空
<inputonblur="if(this.value.replace(/^\s+|\s+$/g,'')=='')alert('不能为空!')">
3.2多行文本框的值不能为空。
3.3多行文本框的值不能超过sMaxStrleng
3.4多行文本框的值不能少于sMixStrleng
3.5判断单选框是否选择。
3.6判断复选框是否选择.
3.7复选框的全选,多选,全不选,反选
3.8文件上传过程中判断文件类型
4、字符类
4.1判断字符全部由a-Z或者是A-Z的字字母组成
<inputonblur="if(/[^a-zA-Z]/g.test(this.value))alert('有错')">
4.2判断字符由字母和数字组成。
<inputonblur="if(/[^0-9a-zA-Z]/g.test(this.value))alert('有错')">
4.3判断字符由字母和数字,下划线,点号组成.且开头的只能是下划线和字母
/^([a-zA-z_]{1})([\w]*)$/g.test(str)
4.4字符串替换函数.Replace();
5、浏览器类
5.1判断浏览器的类型
window.navigator.appName
5.2判断ie的版本
window.navigator.appVersion
5.3判断客户端的分辨率
window.screen.height;window.screen.width;

6、结合类
6.1email的判断。
functionismail(mail)
{
return(newRegExp(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(mail));
}
6.2手机号码的验证
6.3身份证的验证
functionisIdCardNo(num)
{
if(isNaN(num)){alert("输入的不是数字!");returnfalse;}
varlen=num.length,re;
if(len==15)
re=newRegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/);
elseif(len==18)
re=newRegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d)$/);
else{alert("输入的数字位数不对!");returnfalse;}
vara=num.match(re);
if(a!=null)
{
if(len==15)
{
varD=newDate("19"+a[3]+"/"+a[4]+"/"+a[5]);
varB=D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
}
else
{
varD=newDate(a[3]+"/"+a[4]+"/"+a[5]);
varB=D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
}
if(!B){alert("输入的身份证号"+a[0]+"里出生日期不对!");returnfalse;}
}
returntrue;
}

3.7复选框的全选,多选,全不选,反选
<formname=hrong>
<inputtype=checkboxname=Allonclick="checkAll('mm')">全选<br/>
<inputtype=checkboxname=mmonclick="checkItem('All')"><br/>
<inputtype=checkboxname=mmonclick="checkItem('All')"><br/>
<inputtype=checkboxname=mmonclick="checkItem('All')"><br/>
<inputtype=checkboxname=mmonclick="checkItem('All')"><br/>
<inputtype=checkboxname=mmonclick="checkItem('All')"><br/><br/>


<inputtype=checkboxname=All2onclick="checkAll('mm2')">全选<br/>
<inputtype=checkboxname=mm2onclick="checkItem('All2')"><br/>
<inputtype=checkboxname=mm2onclick="checkItem('All2')"><br/>
<inputtype=checkboxname=mm2onclick="checkItem('All2')"><br/>
<inputtype=checkboxname=mm2onclick="checkItem('All2')"><br/>
<inputtype=checkboxname=mm2onclick="checkItem('All2')"><br/>

</form>

<SCRIPTLANGUAGE="javascript">
functioncheckAll(str)
{
vara=document.getElementsByName(str);
varn=a.length;
for(vari=0;i<n;i++)
a[i].checked=window.event.srcElement.checked;
}
functioncheckItem(str)
{
vare=window.event.srcElement;
varall=eval("document.hrong."+str);
if(e.checked)
{
vara=document.getElementsByName(e.name);
all.checked=true;
for(vari=0;i<a.length;i++)
{
if(!a[i].checked){all.checked=false;break;}
}
}
elseall.checked=false;
}
</SCRIPT>

3.8文件上传过程中判断文件类型
<inputtype=fileonchange="alert(this.value.match(/^(.*)(\.)(.{1,8})$/)[3])">

画图:
<OBJECT
id=S
style="LEFT:0px;WIDTH:392px;TOP:0px;HEIGHT:240px"
height=240
width=392
classid="clsid:369303C2-D7AC-11D0-89D5-00A0C90833E6">
</OBJECT>
<SCRIPT>
S.DrawingSurface.ArcDegrees(0,0,0,30,50,60);
S.DrawingSurface.ArcRadians(30,0,0,30,50,60);
S.DrawingSurface.Line(10,10,100,100);
</SCRIPT>

写注册表:
<SCRIPT>
varWshShell=WScript.CreateObject("WScript.Shell");
WshShell.RegWrite("HKCU\\Software\\ACME\\FortuneTeller\\",1,"REG_BINARY");
WshShell.RegWrite("HKCU\\Software\\ACME\\FortuneTeller\\MindReader","Goocher!","REG_SZ");
varbKey=WshShell.RegRead("HKCU\\Software\\ACME\\FortuneTeller\\");
WScript.Echo(WshShell.RegRead("HKCU\\Software\\ACME\\FortuneTeller\\MindReader"));
WshShell.RegDelete("HKCU\\Software\\ACME\\FortuneTeller\\MindReader");
WshShell.RegDelete("HKCU\\Software\\ACME\\FortuneTeller\\");
WshShell.RegDelete("HKCU\\Software\\ACME\\");
</SCRIPT>

TABLAE相关(客户端动态增加行列)
<HTML>
<SCRIPTLANGUAGE="JScript">
functionnumberCells(){
varcount=0;
for(i=0;i<document.all.mytable.rows.length;i++){
for(j=0;j<document.all.mytable.rows(i).cells.length;j++){
document.all.mytable.rows(i).cells(j).innerText=count;
count++;
}
}
}
</SCRIPT>
<BODYonload="numberCells()">
<TABLEid=mytableborder=1>
<TR><TH></TH><TH></TH><TH></TH><TH></TH></TR>
<TR><TD></TD><TD></TD><TD></TD><TD></TD></TR>
<TR><TD></TD><TD></TD><TD></TD><TD></TD></TR>
</TABLE>
</BODY>
</HTML>

1.身份证严格验证:

<script>
varaCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}

functioncidInfo(sId){
variSum=0
varinfo=""
if(!/^\d{17}(\d|x)$/i.test(sId))returnfalse;
sId=sId.replace(/x$/i,"a");
if(aCity[parseInt(sId.substr(0,2))]==null)return"Error:非法地区";
sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2));
vard=newDate(sBirthday.replace(/-/g,"/"))
if(sBirthday!=(d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()))return"Error:非法生日";
for(vari=17;i>=0;i--)iSum+=(Math.pow(2,i)%11)*parseInt(sId.charAt(17-i),11)
if(iSum%11!=1)return"Error:非法证号";
returnaCity[parseInt(sId.substr(0,2))]+","+sBirthday+","+(sId.substr(16,1)%2?"男":"女")
}

document.write(cidInfo("380524198002300016"),"<br/>");
document.write(cidInfo("340524198002300019"),"<br/>")
document.write(cidInfo("340524197711111111"),"<br/>")
document.write(cidInfo("34052419800101001x"),"<br/>");
</script>

2.验证IP地址
<SCRIPTLANGUAGE="javascript">
functionisip(s){
varcheck=function(v){try{return(v<=255&&v>=0)}catch(x){returnfalse}};
varre=s.split(".")
return(re.length==4)?(check(re[0])&&check(re[1])&&check(re[2])&&check(re[3])):false
}

vars="202.197.78.129";
alert(isip(s))
</SCRIPT>



3.加sp1后还能用的无边框窗口!!
<HTMLXMLNS:IE>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<IE:DownloadID="include"STYLE="behavior:url(#default#download)"/>
<title>ChromelessWindow</title>

<SCRIPTLANGUAGE="JScript">






varCW_width=400;
varCW_height=300;
varCW_top=100;
varCW_left=100;
varCW_url="/";
varNew_CW=window.createPopup();
varCW_Body=New_CW.document.body;
varcontent="";
varCSStext="margin:1px;color:black;border:2pxoutset;border-style:expression(onmouseout=onmouseup=function(){this.style.borderStyle='outset'},onmousedown=function(){if(event.button!=2)this.style.borderStyle='inset'});background-color:buttonface;width:16px;height:14px;font-size:12px;line-height:11px;cursor:Default;";

//BuildWindow
include.startDownload(CW_url,function(source){content=source});

functioninsert_content(){
vartemp="";
CW_Body.style.overflow="hidden";
CW_Body.style.backgroundColor="white";
CW_Body.style.border="solidblack1px";
content=content.replace(/<a([^>]*)>/g,"<aonclick='parent.open(this.href);returnfalse'$1>");
temp+="<tablewidth=100%height=100%cellpadding=0cellspacing=0border=0>";
temp+="<trstyle=';font-size:12px;background:#0099CC;height:20;cursor:default'ondblclick=\"Max.innerText=Max.innerText=='1'?'2':'1';parent.if_max=!parent.if_max;parent.show_CW();\"onmouseup='parent.drag_up(event)'onmousemove='parent.drag_move(event)'onmousedown='parent.drag_down(event)'onselectstart='returnfalse'oncontextmenu='returnfalse'>";
temp+="<tdstyle='color:#ffffff;padding-left:5px'>ChromelessWindowForIE6SP1</td>";
temp+="<tdstyle='color:#ffffff;padding-right:5px;'align=right>";
temp+="<spanid=Helponclick=\"alert('ChromelessWindowForIE6SP1-Ver1.0\\n\\nCodeByWindy_sk\\n\\nSpecialThanksForandot')\"style=\""+CSStext+"font-family:System;padding-right:2px;\">?</span>";
temp+="<spanid=Minonclick='parent.New_CW.hide();parent.blur()'style=\""+CSStext+"font-family:Webdings;\"title='Minimum'>0</span>";
temp+="<spanid=Maxonclick=\"this.innerText=this.innerText=='1'?'2':'1';parent.if_max=!parent.if_max;parent.show_CW();\"style=\""+CSStext+"font-family:Webdings;\"title='Maximum'>1</span>";
temp+="<spanid=Closeonclick='parent.opener=null;parent.close()'style=\""+CSStext+"font-family:System;padding-right:2px;\"title='Close'>x</span>";
temp+="</td></tr><tr><tdcolspan=2>";
temp+="<divid=includestyle='overflow:scroll;overflow-x:hidden;overflow-y:auto;HEIGHT:100%;width:"+CW_width+"'>";
temp+=content;
temp+="</div>";
temp+="</td></tr></table>";
CW_Body.innerHTML=temp;
}

setTimeout("insert_content()",1000);

varif_max=true;
functionshow_CW(){
window.moveTo(10000,10000);
if(if_max){
New_CW.show(CW_top,CW_left,CW_width,CW_height);
if(typeof(New_CW.document.all.include)!="undefined"){
New_CW.document.all.include.style.width=CW_width;
New_CW.document.all.Max.innerText="1";
}

}else{
New_CW.show(0,0,screen.width,screen.height);
New_CW.document.all.include.style.width=screen.width;
}
}

window.onfocus=show_CW;
window.onresize=show_CW;

//MoveWindow
vardrag_x,drag_y,draging=false

functiondrag_move(e){
if(draging){
New_CW.show(e.screenX-drag_x,e.screenY-drag_y,CW_width,CW_height);
returnfalse;
}
}

functiondrag_down(e){
if(e.button==2)return;
if(New_CW.document.body.offsetWidth==screen.width&&New_CW.document.body.offsetHeight==screen.height)return;
drag_x=e.clientX;
drag_y=e.clientY;
draging=true;
e.srcElement.setCapture();
}

functiondrag_up(e){
draging=false;
e.srcElement.releaseCapture();
if(New_CW.document.body.offsetWidth==screen.width&&New_CW.document.body.offsetHeight==screen.height)return;
CW_top=e.screenX-drag_x;
CW_left=e.screenY-drag_y;
}

</SCRIPT>
</HTML>

电话号码的验证

要求:
  (1)电话号码由数字、"("、")"和"-"构成
  (2)电话号码为3到8位
  (3)如果电话号码中包含有区号,那么区号为三位或四位
  (4)区号用"("、")"或"-"和其他部分隔开
  (5)移动电话号码为11或12位,如果为12位,那么第一位为0
  (6)11位移动电话号码的第一位和第二位为"13"
  (7)12位移动电话号码的第二位和第三位为"13"
  根据这几条规则,可以与出以下正则表达式:
  (^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)


<scriptlanguage="javascript">
functionPhoneCheck(s){
varstr=s;
varreg=/(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/
alert(reg.test(str));
}
</script>
<inputtype=textname="iphone">
<inputtype=buttononclick="PhoneCheck(document.all.iphone.value)"value="Check">

具有在输入非数字字符不回显的效果,即对非数字字符的输入不作反应。
functionnumbersonly(field,event){
varkey,keychar;
if(window.event){
key=window.event.keyCode;
}
elseif(event){
key=event.which;
}
else{
returntrue
}
keychar=String.fromCharCode(key);
if((key==null)||(key==0)||(key==8)||(key==9)||(key==13)||(key==27)){
returntrue;
}
elseif(("0123456789.").indexOf(keychar)>-1){
window.status="";
returntrue;
}
else{
window.status="Fieldexceptsnumbersonly";
returnfalse;
}
}

验证ip

str=document.RegExpDemo.txtIP.value;
if(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/.test(str)==false)
{
window.alert('错误的IP地址格式');
document.RegExpDemo.txtIP.select();
document.RegExpDemo.txtIP.focus();
return;
}
if(RegExp.$1<1||RegExp.$1>254||RegExp.$2<0||RegExp.$2>254||RegExp.$3<0||RegExp.$3>254||RegExp.$4<1||RegExp.$4>254)
{
window.alert('错误的IP地址');
document.RegExpDemo.txtIP.select();
document.RegExpDemo.txtIP.focus();
return;
}
//剔除如010.020.020.03前面的0
varstr=str.replace(/0(\d)/g,"$1");
str=str.replace(/0(\d)/g,"$1");
window.alert(str);


//一下是取数据的类
//Obj参数指定数据的来源(限定Table),默认第一行为字段名称行
//GetTableData类提供MoveNext方法,参数是表的行向上或向下移动的位数,正数向下移动,负数向上.
//GetFieldData方法获得指定的列名的数据
//Sort_desc方法对指定的列按降序排列
//Sort_asc方法对指定的列按升序排列
//GetData方法返回字段值为特定值的数据数组,提供数据,可以在外部进行其他处理
//Delete方法删除当前记录,数组减少一行
//初始化,Obj:table的名字,Leftlen:左面多余数据长度,Rightlen:右面多余数据长度,
functionGetTableData(Obj,LeftLen,RightLen){
varMyObj=document.all(Obj);
variRow=MyObj.rows.length;
variLen=MyObj.rows[0].cells.length;
vari,j;

TableData=newArray();
for(i=0;i<iRow;i++){
TableData[i]=newArray();
for(j=0;j<iLen;j++){
TableStr=MyObj.rows(i).cells(j).innerText;
TableStr=TableStr.substring(LeftLen,TableStr.length-RightLen).Trim();
TableStr=TableStr.replace(//gi,"").replace(/\r\n/ig,"");
TableData[i][j]=TableStr;
}
}

this.TableData=TableData;
this.cols=this.TableData[0].length;
this.rows=this.TableData.length;
this.rowindex=0;
}


functionmovenext(Step){
if(this.rowindex>=this.rows){
return
}

if(Step==""||typeof(Step)=="undefined"){
if(this.rowindex<this.rows-1)
this.rowindex++;
return;

}
else{
if(this.rowindex+Step<=this.rows-1&&this.rowindex+Step>=0){
this.rowindex=this.rowindex+Step;
}
else
{
if(this.rowindex+Step<0){
this.rowindex=0;
return;
}
if(this.rowindex+Step>this.rows-1){
this.rowindex=this.rows-1;
return;
}
}
}
}


functiongetfielddata(Field){
varcolindex=-1;
vari=0;
if(typeof(Field)=="number"){
colindex=Field;
}
else
{
for(i=0;i<this.cols&&this.rowindex<this.rows;i++){
if(this.TableData[0][i]==Field){
colindex=i;
break;
}
}
}
if(colindex!=-1){
returnthis.TableData[this.rowindex][colindex];
}

}



functionsort_desc(){//降序
varcolindex=-1;
varhighindex=-1;
desc_array=newArray();
vari,j;
for(n=0;n<arguments.length;n++){
Field=arguments[arguments.length-1-n];
for(i=0;i<this.cols;i++){
if(this.TableData[0][i]==Field){
colindex=i;
break;
}
}
if(colindex==-1)
return;
else
{
desc_array[0]=this.TableData[0];
for(i=1;i<this.rows;i++){
desc_array[i]=this.TableData[1];
highindex=1;
for(j=1;j<this.TableData.length;j++){
if(desc_array[i][colindex]<this.TableData[j][colindex]){
desc_array[i]=this.TableData[j];
highindex=j;
}

}
if(highindex!=-1)
this.TableData=this.TableData.slice(0,highindex).concat(this.TableData.slice(highindex+1,this.TableData.length));
}
}


this.TableData=desc_array;
}
return;
}



functionsort_asc(){//升序
varcolindex=-1;
varhighindex=-1;
vari,j;
for(n=0;n<arguments.length;n++){
asc_array=newArray();
Field=arguments[arguments.length-1-n];
for(i=0;i<this.cols;i++){
if(this.TableData[0][i]==Field){
colindex=i;
break;
}
}
if(colindex==-1)
return;
else
{
asc_array[0]=this.TableData[0];
for(i=1;i<this.rows;i++){
asc_array[i]=this.TableData[1];
highindex=1;
for(j=1;j<this.TableData.length;j++){//找出最小的列值
if(asc_array[i][colindex]>this.TableData[j][colindex]){
asc_array[i]=this.TableData[j];
highindex=j;

}

}
if(highindex!=-1)
this.TableData=this.TableData.slice(0,highindex).concat(this.TableData.slice(highindex+1,this.TableData.length));

}
}


this.TableData=asc_array;
}
return;
}



functiongetData(Field,FieldValue){
varcolindex=-1;
vari,j;

GetData=newArray();
if(typeof(Field)=="undefined"||typeof(FieldValue)=="undefined"){
returnthis.TableData;
}

for(j=0;j<this.cols;j++){
if(this.TableData[0][j]==Field){
colindex=j;
}
}
if(colindex!=-1){

for(i=1;i<this.rows;i++){
if(this.TableData[i][colindex]==FieldValue){
GetData[i]=newArray();
GetData[i]=this.TableData[i];
}
}
}
returnGetData;
}
functionDelete(){
this.TableData=this.TableData.slice(0,this.rowindex).concat(this.TableData.slice(this.rowindex+1,this.TableData.length));
this.rows=this.TableData.length;
return;
}
functionupdateField(Field,FieldValue){
varcolindex=-1;
vari=0;
if(typeof(Field)=="number"){
colindex=Field;
}
else
{
for(i=0;i<this.cols&&this.rowindex<this.rows;i++){
if(this.TableData[0][i]==Field){
colindex=i;
break;
}
}
}
if(colindex!=-1){
this.TableData[this.rowindex][colindex]=FieldValue;
}


}
functionmovefirst(){
this.rowindex=0;
}
functionmovelast(){
this.rowindex=this.rows-1;
}
functionString.prototype.Trim(){returnthis.replace(/(^\s*)|(\s*$)/g,"");}
GetTableData.prototype.MoveNext=movenext;
GetTableData.prototype.GetFieldData=getfielddata;
GetTableData.prototype.Sort_asc=sort_asc;
GetTableData.prototype.Sort_desc=sort_desc;
GetTableData.prototype.GetData=getData;
GetTableData.prototype.Delete=Delete;
GetTableData.prototype.UpdateField=updateField;
GetTableData.prototype.MoveFirst=movefirst;

具体的例子:http://202.119.73.208/NetEAn/com/test/jsprint.htm

在每个文本框的onblur事件中调用校验代码,并且每个文本框中onKeyDown事件中写一个enter转tab函数

//回车键换为tab
functionenterToTab()
{
if(event.srcElement.type!='button'&&event.srcElement.type!='textarea'
&&event.keyCode==13)
{
event.keyCode=9;
}
}

有时候还需要自由编辑表格---
给大家一个自由编辑表格的小例子,写的有点乱,呵呵:)

//===============================start================================


<HTML>
<HEAD>
<METAhttp-equiv="Content-Type"content="text/html;charset=gb2312">
<TITLE>测试修改表格</TITLE>
<STYLE>

div
{
BORDER-RIGHT:#80c1441pxsolid;
BORDER-TOP:#80c1441pxsolid;
VISIBILITY:hidden;
BORDER-LEFT:#80c1441pxsolid;
CURSOR:default;
LINE-HEIGHT:20px;
BORDER-BOTTOM:#80c1441pxsolid;
FONT-FAMILY:宋体;
font-size:12px;
POSITION:absolute;
BACKGROUND-COLOR:#f6f6f6;
TOP:30px;
LEFT:30px;
}

tr
{
font-family:"宋体";
color:#000000;
background-color:#C1DBF5;
font-size:12px
}

.TrFoot
{
FONT-SIZE:12px;
font-family:"宋体","Verdana","Arial";
BACKGROUND-COLOR:#6699CC;
COLOR:#FFFFFF;
height:25;
}

.TrHead
{
FONT-SIZE:13px;
font-family:"宋体","Verdana","Arial";
BACKGROUND-COLOR:#77AADD;
COLOR:#FFFFFF;
height:25;
}

INPUT
{
BORDER-COLOR:#AACEF7#AACEF7#AACEF7#AACEF7;
BORDER-RIGHT:1pxsolid;
BORDER-TOP:1pxsolid;
BORDER-LEFT:1pxsolid;
BORDER-BOTTOM:1pxsolid;
FONT-SIZE:12px;
FONT-FAMILY:"宋体","Verdana";
color:#000000;
BACKGROUND-COLOR:#E9EFF5;
}

button
{
BORDER-COLOR:#AACEF7#AACEF7#AACEF7#AACEF7;
BACKGROUND-COLOR:#D5E4F3;
CURSOR:hand;
FONT-SIZE:12px;
BORDER-RIGHT:1pxsolid;
BORDER-TOP:1pxsolid;
BORDER-LEFT:1pxsolid;
BORDER-BOTTOM:1pxsolid;
COLOR:#000000;
}
</STYLE>
</HEAD>
<BODY>
<SCRIPTlanguage="javascript">
<!--全局变量
//标志位,值为false代表未打开一个编辑框,值为true为已经打开一个编辑框开始编辑
varediter_table_cell_tag=false;
//开启编辑功能标志,值为true时为允许编辑
varrun_edit_flag=false;
//-->
</SCRIPT>

<SCRIPTlanguage="javascript">
<!--
/**
*编辑表格函数
*单击某个单元格可以对里面的内容进行自由编辑
*@paratableID为要编辑的table的id
*@paranoEdiID为不要编辑的td的ID,比如说table的标题
*可以写为<TDid="no_editer">自由编辑表格</TD>
*此时该td不可编辑
*/
functionediterTableCell(tableId,noEdiId)
{
vartdObject=event.srcElement;
vartObject=((tdObject.parentNode).parentNode).parentNode;
if(tObject.id==tableId&&tdObject.id!=noEdiId&&editer_table_cell_tag==false&&run_edit_flag==true)
{
tdObject.innerHTML="<inputtype=textid=edit_table_txtname=edit_table_txtvalue="+tdObject.innerText+"size='15'onKeyDown='enterToTab()'><inputtype=buttonvalue='确定'onclick='certainEdit()'>";
edit_table_txt.focus();
edit_table_txt.select();
editer_table_cell_tag=true;
//修改按钮提示信息
editTip.innerText="请先点确定按钮确认修改!";
}
else
{
returnfalse;
}
}

/**
*确定修改
*/
functioncertainEdit()
{
varbObject=event.srcElement;
vartdObject=bObject.parentNode;
vartxtObject=tdObject.firstChild;
tdObject.innerHTML=txtObject.value;
//代表编辑框已经关闭
editer_table_cell_tag=false;
//修改按钮提示信息
editTip.innerText="请单击某个单元格进行编辑!";
}

functionenterToTab()
{
if(event.srcElement.type!='button'&&event.srcElement.type!='textarea'
&&event.keyCode==13)
{
event.keyCode=9;
}
}

/**
*控制是否编辑
*/
functioneditStart()
{
if(event.srcElement.value=="开始编辑")
{
event.srcElement.value="编辑完成";
run_edit_flag=true;
}
else
{
//如果当前没有编辑框,则编辑成功,否则,无法提交
//必须按确定按钮后才能正常提交
if(editer_table_cell_tag==false)
{
alert("编辑成功结束!");
event.srcElement.value="开始编辑";
run_edit_flag=false;
}
}
}

/**
*根据不同的按钮提供不同的提示信息
*/
functionshowTip()
{
if(event.srcElement.value=="编辑完成")
{
editTip.style.top=event.y+15;
editTip.style.left=event.x+12;
editTip.style.visibility="visible";
}
else
{
editTip.style.visibility="hidden";
}
}
-->
</SCRIPT>
<TABLEid="editer_table"width="100%"align="center"
onclick="editerTableCell('editer_table','no_editer')">
<TRclass="TrHead">
<TDcolspan="3"align="center"id="no_editer">自由编辑表格</TD>
</TR>
<TR>
<TDwidth="33%">单击开始编辑按钮,然后点击各单元格编辑</TD>
<TDwidth="33%">2</TD>
<TDwidth="33%">3</TD>
</TR>
<TR>
<TDwidth="33%">4</TD>
<TDwidth="33%">5</TD>
<TDwidth="33%">6</TD>
</TR>
<TR>
<TDwidth="33%">one</TD>
<TDwidth="33%">two</TD>
<TDwidth="33%">three</TD>
</TR>
<TR>
<TDwidth="33%">four</TD>
<TDwidth="33%">five</TD>
<TDwidth="33%">six</TD>
</TR>
<TRclass="TrFoot">
<TDcolspan="3"align="center"id="no_editer">
<INPUTtype="button"class="bt"value="开始编辑"onClick="editStart()"onMouseOver="showTip()"onMouseMove="showTip()"onMouseOut="editTip.style.visibility='hidden';">
</TD>
</TR>
</TABLE>
</BODY>
<DIVid="editTip">请单击某个单元格进行编辑!</DIV>
</HTML>

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章