在b/s開(kāi)發(fā)中經(jīng)常用到的javaScript技術(shù)
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
一、驗(yàn)證類(lèi) 1、數(shù)字驗(yàn)證內(nèi) 1.1 整數(shù) 1.2 大于0的整數(shù) （用于傳來(lái)的ID的驗(yàn)證) 1.3 負(fù)整數(shù)的驗(yàn)證 1.4 整數(shù)不能大于iMax 1.5 整數(shù)不能小于iMin 2、時(shí)間類(lèi) 2.1 短時(shí)間，形如 (13:04:06) 2.2 短日期，形如 (2003-12-05) 2.3 長(zhǎng)時(shí)間，形如 (2003-12-05 13:04:06) 2.4 只有年和月。形如(2003-05,或者2003-5) 2.5 只有小時(shí)和分鐘,形如(12:03) 3、表單類(lèi) 3.1 所有的表單的值都不能為空 3.2 多行文本框的值不能為空。 3.3 多行文本框的值不能超過(guò)sMaxStrleng 3.4 多行文本框的值不能少于sMixStrleng 3.5 判斷單選框是否選擇。 3.6 判斷復(fù)選框是否選擇. 3.7 復(fù)選框的全選，多選，全不選，反選 3.8 文件上傳過(guò)程中判斷文件類(lèi)型 4、字符類(lèi) 4.1 判斷字符全部由a-Z或者是A-Z的字字母組成 4.2 判斷字符由字母和數(shù)字組成。 4.3 判斷字符由字母和數(shù)字，下劃線(xiàn),點(diǎn)號(hào)組成.且開(kāi)頭的只能是下劃線(xiàn)和字母 4.4 字符串替換函數(shù).Replace(); 5、瀏覽器類(lèi) 5.1 判斷瀏覽器的類(lèi)型 5.2 判斷ie的版本 5.3 判斷客戶(hù)端的分辨率 6、結(jié)合類(lèi) 6.1 email的判斷。 6.2 手機(jī)號(hào)碼的驗(yàn)證 6.3 身份證的驗(yàn)證 二、功能類(lèi) 1、時(shí)間與相關(guān)控件類(lèi) 1.1 日歷 1.2 時(shí)間控件 1.3 萬(wàn)年歷 1.4 顯示動(dòng)態(tài)顯示時(shí)鐘效果（文本，如OA中時(shí)間） 1.5 顯示動(dòng)態(tài)顯示時(shí)鐘效果 (圖像，像手表) 2、表單類(lèi) 2.1 自動(dòng)生成表單 2.2 動(dòng)態(tài)添加，修改，刪除下拉框中的元素 2.3 可以輸入內(nèi)容的下拉框 2.4 多行文本框中只能輸入iMax文字。如果多輸入了，自動(dòng)減少到iMax個(gè)文字（多用于短信發(fā)送) 3、打印類(lèi) 3.1 打印控件 4、事件類(lèi) 4.1 屏蔽右鍵 4.2 屏蔽所有功能鍵 4.3 --> 和<-- F5 F11,F9,F1 4.4 屏蔽組合鍵ctrl+N 5、網(wǎng)頁(yè)設(shè)計(jì)類(lèi) 5.1 連續(xù)滾動(dòng)的文字，圖片（注意是連續(xù)的，兩段文字和圖片中沒(méi)有空白出現(xiàn)） 5.2 html編輯控件類(lèi) 5.3 顏色選取框控件 5.4 下拉菜單 5.5 兩層或多層次的下拉菜單 5.6 仿IE菜單的按鈕。（效果如rongshuxa.com的導(dǎo)航欄目) 5.7 狀態(tài)欄，title欄的動(dòng)態(tài)效果（例子很多，可以研究一下） 5.8 雙擊后，網(wǎng)頁(yè)自動(dòng)滾屏 6、樹(shù)型結(jié)構(gòu)。 6.1 asp+SQL版 6.2 asp+xml+sql版 6.3 java+sql或者java+sql+xml 7、無(wú)邊框效果的制作 8、連動(dòng)下拉框技術(shù) 9、文本排序 一、驗(yàn)證類(lèi) 1、數(shù)字驗(yàn)證內(nèi) 1.1 整數(shù) /^(-|\+)?\d+$/.test(str) 1.2 大于0的整數(shù) （用于傳來(lái)的ID的驗(yàn)證) /^\d+$/.test(str) 1.3 負(fù)整數(shù)的驗(yàn)證 /^-\d+$/.test(str) 2、時(shí)間類(lèi) 2.1 短時(shí)間，形如 (13:04:06) function isTime(str) { var a = str.match(/^(\d{1,2})(:)?(\d{1,2})\2(\d{1,2})$/); if (a == null) {alert('輸入的參數(shù)不是時(shí)間格式'); return false;} if (a[1]>24 || a[3]>60 || a[4]>60) { alert("時(shí)間格式不對(duì)"); return false } return true; } 2.2 短日期，形如 (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 長(zhǎng)時(shí)間，形如 (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 只有年和月。形如(2003-05,或者2003-5) 2.5 只有小時(shí)和分鐘,形如(12:03) 3、表單類(lèi) 3.1 所有的表單的值都不能為空 <input onblur="if(this.value.replace(/^\s+|\s+$/g,'')=='')alert('不能為空!')"> 3.2 多行文本框的值不能為空。 3.3 多行文本框的值不能超過(guò)sMaxStrleng 3.4 多行文本框的值不能少于sMixStrleng 3.5 判斷單選框是否選擇。 3.6 判斷復(fù)選框是否選擇. 3.7 復(fù)選框的全選，多選，全不選，反選 3.8 文件上傳過(guò)程中判斷文件類(lèi)型 4、字符類(lèi) 4.1 判斷字符全部由a-Z或者是A-Z的字字母組成 <input onblur="if(/[^a-zA-Z]/g.test(this.value))alert('有錯(cuò)')"> 4.2 判斷字符由字母和數(shù)字組成。 <input onblur="if(/[^0-9a-zA-Z]/g.test(this.value))alert('有錯(cuò)')"> 4.3 判斷字符由字母和數(shù)字，下劃線(xiàn),點(diǎn)號(hào)組成.且開(kāi)頭的只能是下劃線(xiàn)和字母 /^([a-zA-z_]{1})([\w]*)$/g.test(str) 4.4 字符串替換函數(shù).Replace(); 5、瀏覽器類(lèi) 5.1 判斷瀏覽器的類(lèi)型 window.navigator.appName 5.2 判斷ie的版本 window.navigator.appVersion 5.3 判斷客戶(hù)端的分辨率 window.screen.height; window.screen.width; 6、結(jié)合類(lèi) 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 手機(jī)號(hào)碼的驗(yàn)證 6.3 身份證的驗(yàn)證 function isIdCardNo(num) { if (isNaN(num)) {alert("輸入的不是數(shù)字！"); 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("輸入的數(shù)字位數(shù)不對(duì)！"); 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("輸入的身份證號(hào) "+ a[0] +" 里出生日期不對(duì)！"); return false;} } return true; } 3.7 復(fù)選框的全選，多選，全不選，反選 <form name=hrong> <input type=checkbox name=All onclick="checkAll('mm')">全選<br/> <input type=checkbox name=mm onclick="checkItem('All')"><br/> <input type=checkbox name=mm onclick="checkItem('All')"><br/> <input type=checkbox name=mm onclick="checkItem('All')"><br/> <input type=checkbox name=mm onclick="checkItem('All')"><br/> <input type=checkbox name=mm onclick="checkItem('All')"><br/><br/> <input type=checkbox name=All2 onclick="checkAll('mm2')">全選<br/> <input type=checkbox name=mm2 onclick="checkItem('All2')"><br/> <input type=checkbox name=mm2 onclick="checkItem('All2')"><br/> <input type=checkbox name=mm2 onclick="checkItem('All2')"><br/> <input type=checkbox name=mm2 onclick="checkItem('All2')"><br/> <input type=checkbox name=mm2 onclick="checkItem('All2')"><br/> </form> <SCRIPT LANGUAGE="java script"> function checkAll(str) { var a = document.getElementsByName(str); var n = a.length; for (var i=0; i<n; i++) a[i].checked = window.event.srcElement.checked; } function checkItem(str) { var e = window.event.srcElement; var all = eval("document.hrong."+ str); if (e.checked) { var a = document.getElementsByName(e.name); all.checked = true; for (var i=0; i<a.length; i++) { if (!a[i].checked){ all.checked = false; break;} } } else all.checked = false; } </SCRIPT> 3.8 文件上傳過(guò)程中判斷文件類(lèi)型 <input type=file onchange="alert(this.value.match(/^(.*)(\.)(.{1,8})$/)[3])"> 畫(huà)圖: <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> 寫(xiě)注冊(cè)表： <SCRIPT> var WshShell = WScript.CreateObject("WScript.Shell"); WshShell.RegWrite ("HKCU\\Software\\ACME\\FortuneTeller\\", 1, "REG_BINARY"); WshShell.RegWrite ("HKCU\\Software\\ACME\\FortuneTeller\\MindReader", "Goocher!", "REG_SZ"); var bKey = 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相關(guān)(客戶(hù)端動(dòng)態(tài)增加行列） <HTML> <SCRIPT LANGUAGE="JScript"> function numberCells() { var count=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> <BODY onload="numberCells()"> <TABLE id=mytable border=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> １．身份證嚴(yán)格驗(yàn)證： <script> var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"內(nèi)蒙古",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:"臺(tái)灣",81:"香港",82:"澳門(mén)",91:"國(guó)外"} function cidInfo(sId){ var iSum=0 var info="" if(!/^\d{17}(\d|x)$/i.test(sId))return false; sId=sId.replace(/x$/i,"a"); if(aCity[parseInt(sId.substr(0,2))]==null)return "Error:非法地區(qū)"; sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2)); var d=new Date(sBirthday.replace(/-/g,"/")) if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))return "Error:非法生日"; for(var i = 17;i>=0;i --) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11) if(iSum%11!=1)return "Error:非法證號(hào)"; return aCity[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> ２．驗(yàn)證ＩＰ地址 <SCRIPT LANGUAGE="java script"> function isip(s){ var check=function(v){try{return (v<=255 && v>=0)}catch(x){return false}}; var re=s.split(".") return (re.length==4)?(check(re[0]) && check(re[1]) && check(re[2]) && check(re[3])):false } var s="202.197.78.129"; alert(isip(s)) </SCRIPT> ３．加sp1后還能用的無(wú)邊框窗口！！ <HTML XMLNS:IE> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <IE:Download ID="include" STYLE="behavior:url(#default#download)" /> <title>Chromeless Window</title> <SCRIPT LANGUAGE="JScript"> /*--- Special Thanks For andot ---*/ /* This following code are designed and writen by Windy_sk <seasonx@163.net> You can use it freely, but u must held all the copyright items! */ /*--- Thanks For andot Again ---*/ var CW_width = 400; var CW_height = 300; var CW_top = 100; var CW_left = 100; var CW_url = "/"; var New_CW = window.createPopup(); var CW_Body = New_CW.document.body; var content = ""; 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;line-height:11px;cursor:Default;"; //Build Window include.startDownload(CW_url, function(source){content=source}); function insert_content(){ var temp = ""; CW_Body.style.overflow = "hidden"; CW_Body.style.backgroundColor = "white"; CW_Body.style.border = "solid black 1px"; content = content.replace(/<a ([^>]*)>/g,"<a onclick='parent.open(this.href);return false' $1>"); temp += "<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>"; temp += "<tr style=';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'>"; temp += "<td style='color:#ffffff;padding-left:5px'>Chromeless Window For IE6 SP1</td>"; temp += "<td style='color:#ffffff;padding-right:5px;' align=right>"; 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;\">?</span>"; temp += "<span id=Min onclick='parent.New_CW.hide();parent.blur()' style=\""+CSStext+"font-family:Webdings;\" title='Minimum'>0</span>"; 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</span>"; temp += "<span id=Close onclick='parent.opener=null;parent.close()' style=\""+CSStext+"font-family:System;padding-right:2px;\" title='Close'>x</span>"; temp += "</td></tr><tr><td colspan=2>"; temp += "<div id=include style='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); var if_max = true; function show_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; // Move Window var drag_x,drag_y,draging=false function drag_move(e){ if (draging){ New_CW.show(e.screenX-drag_x, e.screenY-drag_y, CW_width, CW_height); return false; } } function drag_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(); } function drag_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> 電話(huà)號(hào)碼的驗(yàn)證 要求： (1)電話(huà)號(hào)碼由數(shù)字、"("、")"和"-"構(gòu)成 (2)電話(huà)號(hào)碼為3到8位 (3)如果電話(huà)號(hào)碼中包含有區(qū)號(hào)，那么區(qū)號(hào)為三位或四位 (4)區(qū)號(hào)用"("、")"或"-"和其他部分隔開(kāi) (5)移動(dòng)電話(huà)號(hào)碼為11或12位，如果為12位,那么第一位為0 (6)11位移動(dòng)電話(huà)號(hào)碼的第一位和第二位為"13" (7)12位移動(dòng)電話(huà)號(hào)碼的第二位和第三位為"13" 根據(jù)這幾條規(guī)則，可以與出以下正則表達(dá)式： (^[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 language="java script"> function PhoneCheck(s) { var str=s; 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}$)/ alert(reg.test(str)); } </script> <input type=text name="iphone"> <input type=button onclick="PhoneCheck(document.all.iphone.value)" value="Check"> 具有在輸入非數(shù)字字符不回顯的效果，即對(duì)非數(shù)字字符的輸入不作反應(yīng)。 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; } } 驗(yàn)證ip str=document.RegExpDemo.txtIP.value; if(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/.test(str)==false) { window.alert('錯(cuò)誤的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('錯(cuò)誤的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); //一下是取數(shù)據(jù)的類(lèi) http://blog.knowsky.com //Obj參數(shù)指定數(shù)據(jù)的來(lái)源(限定Table),默認(rèn)第一行為字段名稱(chēng)行 //GetTableData類(lèi)提供MoveNext方法,參數(shù)是表的行向上或向下移動(dòng)的位數(shù),正數(shù)向下移動(dòng),負(fù)數(shù)向上. //GetFieldData方法獲得指定的列名的數(shù)據(jù) //Sort_desc方法對(duì)指定的列按降序排列 //Sort_asc方法對(duì)指定的列按升序排列 //GetData方法返回字段值為特定值的數(shù)據(jù)數(shù)組,提供數(shù)據(jù),可以在外部進(jìn)行其他處理 //Delete方法刪除當(dāng)前記錄,數(shù)組減少一行 //初始化,Obj:table的名字,Leftlen:左面多余數(shù)據(jù)長(zhǎng)度,Rightlen:右面多余數(shù)據(jù)長(zhǎng)度, 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;i< iRow;i++){ TableData[i]=new Array(); 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; } function movenext(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; } } } } function getfielddata(Field){ var colindex=-1; var i=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) { 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; 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; } function sort_asc(){//升序 var colindex=-1; var highindex=-1; var i,j; for (n=0; n<arguments.length; n++){ asc_array=new Array(); 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; } 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;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]=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;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; } } 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; 在每個(gè)文本框的onblur事件中調(diào)用校驗(yàn)代碼,并且每個(gè)文本框中onKeyDown事件中寫(xiě)一個(gè)enter轉(zhuǎn)tab函數(shù) //回車(chē)鍵換為tab function enterToTab() { if(event.srcElement.type != 'button' && event.srcElement.type != 'textarea' && event.keyCode == 13) { event.keyCode = 9; } } 有時(shí)候還需要自由編輯表格--- 給大家一個(gè)自由編輯表格的小例子,寫(xiě)的有點(diǎn)亂,呵呵:） //===============================start================================ <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>測(cè)試修改表格</TITLE> <STYLE> /*提示層的樣式*/ div { BORDER-RIGHT: #80c144 1px solid; BORDER-TOP: #80c144 1px solid; VISIBILITY: hidden; BORDER-LEFT: #80c144 1px solid; CURSOR: default; LINE-HEIGHT: 20px; BORDER-BOTTOM: #80c144 1px solid; FONT-FAMILY: 宋體; POSITION: absolute; BACKGROUND-COLOR: #f6f6f6; TOP:30px; LEFT:30px; } /*tr的樣式*/ tr { font-family: "宋體"; color: #000000; background-color: #C1DBF5; font-size: 14px } /*table腳注樣式*/ .TrFoot { FONT-SIZE: 14px; font-family:"宋體", "Verdana", "Arial"; BACKGROUND-COLOR: #6699CC; COLOR:#FFFFFF; height: 25; } /*trhead屬性*/ .TrHead { FONT-SIZE: 13px; font-family:"宋體", "Verdana", "Arial"; BACKGROUND-COLOR: #77AADD; COLOR:#FFFFFF; height: 25; } /*文本框樣式*/ INPUT { BORDER-COLOR: #AACEF7 #AACEF7 #AACEF7 #AACEF7; BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; FONT-SIZE: 14px; FONT-FAMILY: "宋體","Verdana"; color: #000000; BACKGROUND-COLOR: #E9EFF5; } /*button樣式*/ button { BORDER-COLOR: #AACEF7 #AACEF7 #AACEF7 #AACEF7; BACKGROUND-COLOR: #D5E4F3; CURSOR: hand; FONT-SIZE:14px; BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; COLOR: #000000; } </STYLE> </HEAD> <BODY> <SCRIPT language = "java script"> <!--全局變量 //標(biāo)志位,值為false代表未打開(kāi)一個(gè)編輯框,值為true為已經(jīng)打開(kāi)一個(gè)編輯框開(kāi)始編輯 var editer_table_cell_tag = false; //開(kāi)啟編輯功能標(biāo)志,值為true時(shí)為允許編輯 var run_edit_flag = false; //--> </SCRIPT> <SCRIPT language = "java script"> <!-- /** * 編輯表格函數(shù) * 單擊某個(gè)單元格可以對(duì)里面的內(nèi)容進(jìn)行自由編輯 * @para tableID 為要編輯的table的id * @para noEdiID 為不要編輯的td的ID,比如說(shuō)table的標(biāo)題 * 可以寫(xiě)為<TD id="no_editer">自由編輯表格</TD> * 此時(shí)該td不可編輯 */ function editerTableCell(tableId,noEdiId) { var tdObject = event.srcElement; var tObject = ((tdObject.parentNode).parentNode).parentNode; if(tObject.id == tableId &&tdObject.id != noEdiId&&editer_table_cell_tag == false && run_edit_flag == true) { 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()'>"; edit_table_txt.focus(); edit_table_txt.select(); editer_table_cell_tag = true; //修改按鈕提示信息 editTip.innerText = "請(qǐng)先點(diǎn)確定按鈕確認(rèn)修改!"; } else { return false; } } /** * 確定修改 */ function certainEdit() { var bObject = event.srcElement; var tdObject = bObject.parentNode; var txtObject = tdObject.firstChild; tdObject.innerHTML = txtObject.value; //代表編輯框已經(jīng)關(guān)閉 editer_table_cell_tag = false; //修改按鈕提示信息 editTip.innerText = "請(qǐng)單擊某個(gè)單元格進(jìn)行編輯!"; } function enterToTab() { if(event.srcElement.type != 'button' && event.srcElement.type != 'textarea' && event.keyCode == 13) { event.keyCode = 9; } } /** * 控制是否編輯 */ function editStart() { if(event.srcElement.value == "開(kāi)始編輯") { event.srcElement.value = "編輯完成"; run_edit_flag = true; } else { //如果當(dāng)前沒(méi)有編輯框,則編輯成功,否則,無(wú)法提交 //必須按確定按鈕后才能正常提交 if(editer_table_cell_tag == false) { alert("編輯成功結(jié)束!"); event.srcElement.value = "開(kāi)始編輯"; run_edit_flag = false; } } } /**
* 根據(jù)不同的按鈕提供不同的提示信息 */ function showTip() { 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> <TABLE id="editer_table" width="100%" align="center" onclick="editerTableCell('editer_table','no_editer')"> <TR class="TrHead"> <TD colspan="3" align="center" id="no_editer">自由編輯表格</TD> </TR> <TR> <TD width="33%">單擊開(kāi)始編輯按鈕,然后點(diǎn)擊各單元格編輯</TD> <TD width="33%">2</TD> <TD width="33%">3</TD> </TR> <TR> <TD width="33%">4</TD> <TD width="33%">5</TD> <TD width="33%">6</TD> </TR> <TR> <TD width="33%">one</TD> <TD width="33%">two</TD> <TD width="33%">three</TD> </TR> <TR> <TD width="33%">four</TD> <TD width="33%">five</TD> <TD width="33%">six</TD> </TR> <TR class="TrFoot"> <TD colspan="3" align="center" id="no_editer"> <INPUT type="button" class="bt" value="開(kāi)始編輯" onClick="editStart()" onMouseOver="showTip()" onMouseMove="showTip()" onMouseOut="editTip.style.visibility = 'hidden';"> </TD> </TR> </TABLE> </BODY> <DIV id="editTip">請(qǐng)單擊某個(gè)單元格進(jìn)行編輯!</DIV> </HTML> 該文章在 2010/8/18 22:11:26 編輯過(guò) |
關(guān)鍵字查詢(xún)
相關(guān)文章
正在查詢(xún)... 
|
400 186 1886
