Home > Web Front-end > JS Tutorial > Commonly used JavaScript technologies and codes in B/S development_javascript skills

Commonly used JavaScript technologies and codes in B/S development_javascript skills

WBOY
Release: 2016-05-16 19:17:19
Original
972 people have browsed it

JavaScript technology often used in b/s development
1. Verification class
1. Digital verification
1.1 Integer
1.2 Integer greater than 0 (used for verification of passed ID)
1.3 Verification of negative integers
1.4 The integer cannot be greater than iMax
1.5 The integer cannot be less than iMin
2. Time class
2.1 Short time, in the form of (13:04:06)
2.2 Short date, in the shape of (2003-12-05)
2.3 Long time, in the shape of (2003-12-05 13:04:06)
2.4 Only year and month. It is in the form of (2003-05, or 2003-5)
2.5 It only has hours and minutes, it is in the form of (12:03)
3. Form class
3.1 All form values ​​cannot be empty
3.2 The value of the multi-line text box cannot be empty.
3.3 The value of the multi-line text box cannot exceed sMaxStrleng
3.4 The value of the multi-line text box cannot be less than sMixStrleng
3.5 Determine whether the radio button is selected.
3.6 Determine whether the check box is selected.
3.7 Select all check boxes, multiple selections, unselect all, inverse selection
3.8 Determine the file type during file upload
4. Character type
4.1 The judgment characters are all composed of letters from a-Z or A-Z
4.2 The judgment characters are composed of letters and numbers.
4.3 Judgment characters are composed of letters, numbers, underscores, and dots. And the beginning can only be an underscore and a letter
4.4 String replacement function.Replace();
5. Browser class
5.1 Determine the type of browser
5.2 Determine the version of ie
5.3 Determine the resolution of the client

6. Determine the combined class
6.1 Determine email.
6.2 Verification of mobile phone number
6.3 Verification of ID card


2. Functional category

1. Time and related control categories
1.1 Calendar
1.2 Time control
1.3 Perpetual calendar
1.4 Display dynamic display clock effect (text, such as time in OA)
1.5 Display dynamic display clock effect (image, like watch)
2. Form class
2.1 Automatically generate forms
2.2 Dynamically add, modify, and delete elements in the drop-down box
2.3 Drop-down box where content can be entered
2.4 Only iMax text can be entered in the multi-line text box. If you input too much, it will be automatically reduced to iMax text (mostly used for sending text messages)

3. Printing class
3.1 Print control
4. Event class
4.1 Shield right click
4.2 Block all function keys
4.3 --> and 4.4 Block key combination ctrl N
5. Web design class
5.1 Continuously scrolling text and pictures (note It is continuous, and there is no blank space between the two paragraphs of text and pictures)
5.2 HTML editing control class
5.3 Color selection box control
5.4 Drop-down menu
5.5 Two- or multi-level drop-down menu
5.6 IE menu-like buttons. (The effect is like the navigation column of rongshuxa.com)
5.7 Dynamic effects of status bar and title bar (there are many examples, you can study them)
5.8 After double-clicking, the web page automatically scrolls
6. Tree structure.
6.1 asp SQL version
6.2 asp xml sql version
6.3 java sql or java sql xml
7. Production of borderless effect
8. Linked drop-down box technology
9. Text sorting


1. Verification type
1. Numeric verification
1.1 Integer
/^(-| )?d $/.test(str)
1.2 Integer greater than 0 (used for verification of passed ID)
/^d $/.test(str)
1.3 Verification of negative integer
/^-d $/.test(str)
2. Time class
2.1 short time, in the form of (13:04:06)
function isTime(str)
{
var a = str.match(/^(d{1 ,2})(:)?(d{1,2})2(d{1,2})$/);
if (a == null) {alert('The input parameter is not in time format' ); return false;}
if (a[1]>24 || a[3]>60 || a[4]>60)
{
alert("The time format is incorrect");
return false
}
return true;
}
2.2 Short date, in the form of (2003-12-05)
function strDateTime(str)
{
var r = str.match(/^(d{1,4})(-|/)(d{1,2})2(d{1,2})$/);
if(r= =null)return false;
var d= new Date(r[1], r[3]-1, r[4]);
return (d.getFullYear()==r[1]&& (d.getMonth() 1)==r[3]&&d.getDate()==r[4]);
}
2.3 long time, shaped like (2003-12-05 13:04: 06)
function strDateTime(str)
{
var reg = /^(d{1,4})(-|/)(d{1,2})2(d{1,2 }) (d{1,2}):(d{1,2}):(d{1,2})$/;
var r = str.match(reg);
if(r ==null)return false;
var d= new Date(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 Only year and month. It is in the form of (2003-05, or 2003-5)
2.5 It only has hours and minutes, it is in the form of (12:03)
3. Form class
3.1 All form values ​​cannot be empty

3.2 The value of the multi-line text box cannot be empty.
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 判断字符由字母和数字,下划线,点号组成.且开头的只能是下划线和字母
/^([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.1 email的判断。
function ismail(mail)
{
return(new RegExp(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(mail));
}
6.2 手机号码的验证
6.3 身份证的验证
function isIdCardNo(num)
{
if (isNaN(num)) {alert("输入的不是数字!"); return false;}
var len = num.length, re; 
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)$/);
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;}
}
return true;
}

3.7 复选框的全选,多选,全不选,反选


全选














全选














<script> <BR>function checkAll(str) <BR>{ <BR>var a = document.getElementsByName(str); <BR>var n = a.length; <BR>for (var i=0; i<n; i++) <BR>a[i].checked = window.event.srcElement.checked; <BR>} <BR>function checkItem(str) <BR>{ <BR>var e = window.event.srcElement; <BR>var all = eval("document.hrong."+ str); <BR>if (e.checked) <BR>{ <BR>var a = document.getElementsByName(e.name); <BR>all.checked = true; <BR>for (var i=0; i<a.length; i++) <BR>{ <BR>if (!a[i].checked){ all.checked = false; break;} <BR>} <BR>} <BR>else all.checked = false; <BR>} <BR></script>

3.8 文件上传过程中判断文件类型


画图:
id=S 
style="LEFT: 0px; WIDTH: 392px; TOP: 0px; HEIGHT: 240px" 
height=240 
width=392 
classid="clsid:369303C2-D7AC-11D0-89D5-00A0C90833E6">

<script> <BR>S.DrawingSurface.ArcDegrees(0,0,0,30,50,60); <BR>S.DrawingSurface.ArcRadians(30,0,0,30,50,60); <BR>S.DrawingSurface.Line(10,10,100,100); <BR></script>

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

TABLAE相关(客户端动态增加行列)

<script> <BR>function numberCells() { <BR>var count=0; <BR>for (i=0; i < document.all.mytable.rows.length; i++) { <BR>for (j=0; j < document.all.mytable.rows(i).cells.length; j++) { <BR>document.all.mytable.rows(i).cells(j).innerText = count; <BR>count++; <BR>} <BR>} <BR>} <BR></script>





       
       
       


 

1.身份证严格验证:

<script> <BR>var aCity={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:"国外"} <br><br>function cidInfo(sId){ <BR>var iSum=0 <BR>var info="" <BR>if(!/^\d{17}(\d|x)$/i.test(sId))return false; <BR>sId=sId.replace(/x$/i,"a"); <BR>if(aCity[parseInt(sId.substr(0,2))]==null)return "Error:非法地区"; <BR>sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2)); <BR>var d=new Date(sBirthday.replace(/-/g,"/")) <BR>if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))return "Error:非法生日"; <BR>for(var i = 17;i>=0;i --) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11) <BR>if(iSum%11!=1)return "Error:非法证号"; <BR>return aCity[parseInt(sId.substr(0,2))]+","+sBirthday+","+(sId.substr(16,1)%2?"男":"女") <BR>} <br><br>document.write(cidInfo("380524198002300016"),"<br/>"); <BR>document.write(cidInfo("340524198002300019"),"<br/>") <BR>document.write(cidInfo("340524197711111111"),"<br/>") <BR>document.write(cidInfo("34052419800101001x"),"<br/>"); <BR></script>

2.验证IP地址
<script> <BR>function isip(s){ <BR>var check=function(v){try{return (v<=255 && v>=0)}catch(x){return false}}; <BR>var re=s.split(".") <BR>return (re.length==4)?(check(re[0]) && check(re[1]) && check(re[2]) && check(re[3])):false <BR>} <br><br>var s="202.197.78.129"; <BR>alert(isip(s)) <BR></script>



3.加sp1后还能用的无边框窗口!!



Chromeless Window

<script> <BR>/*--- Special Thanks For andot ---*/ <br><br>/* <BR>This following code are designed and writen by Windy_sk <seasonx@163.net> <BR>You can use it freely, but u must held all the copyright items! <BR>*/ <br><br>/*--- Thanks For andot Again ---*/ <br><br>var CW_width = 400; <BR>var CW_height = 300; <BR>var CW_top = 100; <BR>var CW_left = 100; <BR>var CW_url = "/"; <BR>var New_CW = window.createPopup(); <BR>var CW_Body = New_CW.document.body; <BR>var content = ""; <BR>var CSStext = "margin:1px;color:black; border:2px outset;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;"; <br><br>//Build Window <BR>include.startDownload(CW_url, function(source){content=source}); <br><br>function insert_content(){ <BR>var temp = ""; <BR>CW_Body.style.overflow = "hidden"; <BR>CW_Body.style.backgroundColor = "white"; <BR>CW_Body.style.border = "solid black 1px"; <BR>content = content.replace(/<a ([^>]*)>/g,"<a onclick='parent.open(this.href);return false' $1>"); <BR>temp += "<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>"; <BR>temp += "<tr style=';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='return false' oncontextmenu='return false'>"; <BR>temp += "<td style='color:#ffffff;padding-left:5px'>Chromeless Window For IE6 SP1"; <BR>temp += "<td style='color:#ffffff;padding-right:5px;' align=right>"; <BR>temp += "<span id=Help onclick=\"alert('Chromeless Window For IE6 SP1 - Ver 1.0\\n\\nCode By Windy_sk\\n\\nSpecial Thanks For andot')\" style=\""+CSStext+"font-family:System;padding-right:2px;\">?"; <BR>temp += "<span id=Min onclick='parent.New_CW.hide();parent.blur()' style=\""+CSStext+"font-family:Webdings;\" title='Minimum'>0"; <BR>temp += "<span id=Max onclick=\"this.innerText=this.innerText=='1'?'2':'1';parent.if_max=!parent.if_max;parent.show_CW();\" style=\""+CSStext+"font-family:Webdings;\" title='Maximum'>1"; <BR>temp += "<span id=Close onclick='parent.opener=null;parent.close()' style=\""+CSStext+"font-family:System;padding-right:2px;\" title='Close'>x"; <BR>temp += "<tr><td colspan=2>"; <BR>temp += "<div id=include style='overflow:scroll;overflow-x:hidden;overflow-y:auto; HEIGHT: 100%; width:"+CW_width+"'>"; <BR>temp += content; <BR>temp += ""; <BR>temp += ""; <BR>CW_Body.innerHTML = temp; <BR>} <br><br>setTimeout("insert_content()",1000); <br><br>var if_max = true; <BR>function show_CW(){ <BR>window.moveTo(10000, 10000); <BR>if(if_max){ <BR>New_CW.show(CW_top, CW_left, CW_width, CW_height); <BR>if(typeof(New_CW.document.all.include)!="undefined"){ <BR>New_CW.document.all.include.style.width = CW_width; <BR>New_CW.document.all.Max.innerText = "1"; <BR>} <br><br>}else{ <BR>New_CW.show(0, 0, screen.width, screen.height); <BR>New_CW.document.all.include.style.width = screen.width; <BR>} <BR>} <br><br>window.onfocus = show_CW; <BR>window.onresize = show_CW; <br><br>// Move Window <BR>var drag_x,drag_y,draging=false <br><br>function drag_move(e){ <BR>if (draging){ <BR>New_CW.show(e.screenX-drag_x, e.screenY-drag_y, CW_width, CW_height); <BR>return false; <BR>} <BR>} <br><br>function drag_down(e){ <BR>if(e.button==2)return; <BR>if(New_CW.document.body.offsetWidth==screen.width && New_CW.document.body.offsetHeight==screen.height)return; <BR>drag_x=e.clientX; <BR>drag_y=e.clientY; <BR>draging=true; <BR>e.srcElement.setCapture(); <BR>} <br><br>function drag_up(e){ <BR>draging=false; <BR>e.srcElement.releaseCapture(); <BR>if(New_CW.document.body.offsetWidth==screen.width && New_CW.document.body.offsetHeight==screen.height) return; <BR>CW_top = e.screenX-drag_x; <BR>CW_left = e.screenY-drag_y; <BR>} <br><br></script>


电话号码的验证

要求:
  (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}$)


<script> <BR>function PhoneCheck(s) { <BR>var str=s; <BR>var reg=/(^[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}$)/ <BR>alert(reg.test(str)); <BR>} <BR></script>



具有在输入非数字字符不回显的效果,即对非数字字符的输入不作反应。
function numbersonly(field,event){
var key,keychar;
if(window.event){
key = window.event.keyCode;
}
else if (event){
key = event.which;
}
else{
return true
}
keychar = String.fromCharCode(key);
if((key == null)||(key == 0)||(key == 8)||(key == 9)||(key == 13)||(key == 27)){
return true;
}
else if(("0123456789.").indexOf(keychar)>-1){
window.status = "";
return true;
}
else {
window.status = "Field excepts numbers only";
return false;
}
}

验证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.$1254||RegExp.$2254||RegExp.$3254||RegExp.$4254)
{
window.alert('错误的IP地址');
document.RegExpDemo.txtIP.select();
document.RegExpDemo.txtIP.focus();
return;
}
//剔除 如 010.020.020.03 前面 的0 
var str=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:右面多余数据长度,
function GetTableData(Obj,LeftLen,RightLen){
var MyObj=document.all(Obj);
var iRow=MyObj.rows.length;
var iLen=MyObj.rows[0].cells.length;
var i,j;

TableData=new Array();
for (i=0;iTableData[i]=new Array();
for (j=0;jTableStr=MyObj.rows(i).cells(j).innerText;
TableStr=TableStr.substring(LeftLen, TableStr.length-RightLen).Trim();
TableStr=TableStr.replace(/ /gi,"").replace(/rn/ig,"");
TableData[i][j]=TableStr;
}
}

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


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

if (Step=="" || typeof(Step)=="undefined") {
if (this.rowindexthis.rowindex ;
return;

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


function getfielddata(Field){
var colindex=-1;
var i=0;
if (typeof(Field) == "number"){
colindex=Field;
}
else
{
for (i=0;iif (this.TableData[0][i]==Field){
colindex=i;
break;

}
}
if (colindex!=-1) {
return this.TableData[this.rowindex][colindex];
}

}



function sort_desc(){//降序
var colindex=-1;
var highindex=-1;
desc_array=new Array();
var i,j;
for (n=0; nField=arguments[arguments.length-1-n];
for (i=0;iif (this.TableData[0][i]==Field){
colindex=i;
break;

}
if ( colindex==-1 )
return;
else
{
desc_array[0]=this.TableData[0];
for(i=1;idesc_array[i]=this.TableData[1];
highindex=1;
for(j=1;jif (desc_array[i][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;
}



function sort_asc(){//升序
var colindex=-1;
var highindex=-1;
var i,j;
for (n=0; nasc_array=new Array();
Field=arguments[arguments.length-1-n];
for (i=0;iif (this.TableData[0][i]==Field){
colindex=i;
break;

}
if ( colindex==-1 )
return;
else
{
asc_array[0]=this.TableData[0];
for(i=1;iasc_array[i]=this.TableData[1];
highindex=1;
for(j=1;jif (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;
}



function getData(Field,FieldValue){
var colindex=-1;
var i,j;

GetData=new Array();
if (typeof(Field)=="undefined" || typeof(FieldValue)=="undefined" ){
return this.TableData;
}

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

for(i=1;iif (this.TableData[i][colindex]==FieldValue){
GetData[i]=new Array();
GetData[i]=this.TableData[i]; 
}
}
}
return GetData;
}
function Delete(){
this.TableData=this.TableData.slice(0,this.rowindex).concat(this.TableData.slice(this.rowindex 1,this.TableData.length)); 
this.rows=this.TableData.length;
return;
}
function updateField(Field,FieldValue){
var colindex=-1;
var i=0;
if (typeof(Field) == "number"){
colindex=Field;
}
else
{
for (i=0;iif (this.TableData[0][i]==Field){
colindex=i;
break;

}
}
if (colindex!=-1) {
this.TableData[this.rowindex][colindex]=FieldValue;
}


}
function movefirst(){
this.rowindex=0;
}
function movelast(){
this.rowindex=this.rows-1;
}
function String.prototype.Trim() {return this.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
function enterToTab()
{
if(event.srcElement.type != 'button' && event.srcElement.type != 'textarea'
&& event.keyCode == 13)
{
event.keyCode = 9;
}
}

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

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





测试修改表格



<script> <BR><!--全局变量 <BR>//标志位,值为false代表未打开一个编辑框,值为true为已经打开一个编辑框开始编辑 <BR>var editer_table_cell_tag = false; <BR>//开启编辑功能标志,值为true时为允许编辑 <BR>var run_edit_flag = false; <BR>//--> <BR></script>

<script> <BR><!-- <BR>/** <BR>* 编辑表格函数 <BR>* 单击某个单元格可以对里面的内容进行自由编辑 <BR>* @para tableID 为要编辑的table的id <BR>* @para noEdiID 为不要编辑的td的ID,比如说table的标题 <BR>* 可以写为<TD id="no_editer">自由编辑表格 <BR>* 此时该td不可编辑 <BR>*/ <BR>function editerTableCell(tableId,noEdiId) <BR>{ <BR>var tdObject = event.srcElement; <BR>var tObject = ((tdObject.parentNode).parentNode).parentNode; <BR>if(tObject.id == tableId &&tdObject.id != noEdiId&&editer_table_cell_tag == false && run_edit_flag == true) <BR>{ <BR>tdObject.innerHTML = "<input type=text id=edit_table_txt name=edit_table_txt value="+tdObject.innerText+" size='15' onKeyDown='enterToTab()'> <input type=button value=' 确定 ' onclick='certainEdit()'>"; <BR>edit_table_txt.focus(); <BR>edit_table_txt.select(); <BR>editer_table_cell_tag = true; <BR>//修改按钮提示信息 <BR>editTip.innerText = "请先点确定按钮确认修改!"; <BR>} <BR>else <BR>{ <BR>return false; <BR>} <BR>} <br><br>/** <BR>* 确定修改 <BR>*/ <BR>function certainEdit() <BR>{ <BR>var bObject = event.srcElement; <BR>var tdObject = bObject.parentNode; <BR>var txtObject = tdObject.firstChild; <BR>tdObject.innerHTML = txtObject.value; <BR>//代表编辑框已经关闭 <BR>editer_table_cell_tag = false; <BR>//修改按钮提示信息 <BR>editTip.innerText = "请单击某个单元格进行编辑!"; <BR>} <br><br>function enterToTab() <BR>{ <BR>if(event.srcElement.type != 'button' && event.srcElement.type != 'textarea' <BR>&& event.keyCode == 13) <BR>{ <BR>event.keyCode = 9; <BR>} <BR>} <br><br>/** <BR>* 控制是否编辑 <BR>*/ <BR>function editStart() <BR>{ <BR>if(event.srcElement.value == "开始编辑") <BR>{ <BR>event.srcElement.value = "编辑完成"; <BR>run_edit_flag = true; <BR>} <BR>else <BR>{ <BR>//如果当前没有编辑框,则编辑成功,否则,无法提交 <BR>//必须按确定按钮后才能正常提交 <BR>if(editer_table_cell_tag == false) <BR>{ <BR>alert("编辑成功结束!"); <BR>event.srcElement.value = "开始编辑"; <BR>run_edit_flag = false; <BR>} <BR>} <BR>} <br><br>/** <BR>* 根据不同的按钮提供不同的提示信息 <BR>*/ <BR>function showTip() <BR>{ <BR>if(event.srcElement.value == "编辑完成") <BR>{ <BR>editTip.style.top = event.y + 15; <BR>editTip.style.left = event.x + 12; <BR>editTip.style.visibility = "visible"; <BR>} <BR>else <BR>{ <BR>editTip.style.visibility = "hidden"; <BR>} <BR>} <BR>--> <BR></script>
onclick="editerTableCell('editer_table','no_editer')"> 

 




















 


 
自由编辑表格
单击开始编辑按钮,然后点击各单元格编辑 2 3
4 5 6
one two three
four five six




请单击某个单元格进行编辑!
 
 
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template