B/S開發常用JavaScript技術

weixin_34262482發表於2005-12-22
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-05 13: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.1 email的判斷。
  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 --> 和<-- F5 F11,F9,F1
  4.4 遮蔽組合鍵ctrl+N
5、網頁設計類
  5.1 連續滾動的文字，圖片（注意是連續的，兩段文字和圖片中沒有空白出現）
  5.2 html編輯控制元件類
  5.3 顏色選取框控制元件
  5.4 下拉選單
  5.5 兩層或多層次的下拉選單
  5.6 仿IE選單的按鈕。（效果如rongshuxa.com的導航欄目)
  5.7 狀態列，title欄的動態效果（例子很多，可以研究一下）
  5.8 雙擊後，網頁自動滾屏
6、樹型結構。
  6.1 asp+SQL版
  6.2 asp+xml+sql版
  6.3 java+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)
      function isTime(str)
      {
        var a = str.match(/^(\d{1,2})(:)?(\d{1,2})\2(\d{1,2})$/);
        if (a == null) {alert('輸入的引數不是時間格式'); return false;}
        if (a[1]>24 || a[3]>60 || a[4]>60)
        {
          alert("時間格式不對");
          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 長時間，形如 (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 只有小時和分鐘,形如(12:03)
3、表單類
  3.1 所有的表單的值都不能為空
      <input onblur="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的字字母組成
      <input onblur="if(/[^a-zA-Z]/g.test(this.value))alert('有錯')">
  4.2 判斷字元由字母和數字組成。
      <input onblur="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.navigat or.appName
  5.2 判斷ie的版本
      window.navigat or.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 核取方塊的全選，多選，全不選，反選
<f orm 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/>

</f orm>

<SCRIPT LANGUAGE="java script">
function checkAll(str)
{
  var a = document.getElementsByName(str);
  var n = a.length;
  f or (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;
    f or (var i=0; i<a.length; i++)
    {
      if (!a[i].checked){ all.checked = false; break;}
    }
  }
  else all.checked = false;
}
</SCRIPT>

3.8 檔案上傳過程中判斷檔案型別
<input type=file onchange="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>
var WshShell = WScript.CreateObject("WScript.Shell");
WshShell.RegWrite ("HKCU\\Software\\ACME\\F ortuneTeller\\", 1, "REG_BINARY");
WshShell.RegWrite ("HKCU\\Software\\ACME\\F ortuneTeller\\MindReader", "Goocher!", "REG_SZ");
var bKey =    WshShell.RegRead ("HKCU\\Software\\ACME\\F ortuneTeller\\");
WScript.Echo (WshShell.RegRead ("HKCU\\Software\\ACME\\F ortuneTeller\\MindReader"));
WshShell.RegDelete ("HKCU\\Software\\ACME\\F ortuneTeller\\MindReader");
WshShell.RegDelete ("HKCU\\Software\\ACME\\F ortuneTeller\\");
WshShell.RegDelete ("HKCU\\Software\\ACME\\");
</SCRIPT>

TABLAE相關(客戶端動態增加行列）
<HTML>
<SCRIPT LANGUAGE="JScript">
function numberCells() {
    var count=0;
    f or (i=0; i < document.all.mytable.rows.length; i++) {
        f or (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 b order=1>
<TR><TH>&nbsp;</TH><TH>&nbsp;</TH><TH>&nbsp;</TH><TH>&nbsp;</TH></TR>
<TR><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD></TR>
<TR><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD></TR>
</TABLE>
</BODY>
</HTML>

１．身份證嚴格驗證：

<script>
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:"國外"}
 
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 "Err or:非法地區";
 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 "Err or:非法生日";
 f or(var i = 17;i>=0;i --) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11)
 if(iSum%11!=1)return "Err or:非法證號";
 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>

２．驗證ＩＰ地址
<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後還能用的無邊框視窗！！
<HTML XMLNS:IE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<IE:Download ID="include" STYLE="behavi or:url(#default#download)" />
<title>Chromeless Window</title>

<SCRIPT LANGUAGE="JScript">
/*--- Special Thanks F or 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 F or 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;col or:black; b order:2px outset;b order-style:expression(onmouseout=onmouseup=function(){this.style.b orderStyle='outset'}, onmousedown=function(){if(event.button!=2)this.style.b orderStyle='inset'});background-col or:buttonface;width:16px;height:14px;font-size:12px;line-height:11px;curs or:Default;";

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

function insert_content(){
 var temp = "";
 CW_Body.style.overflow  = "hidden";
 CW_Body.style.backgroundCol or = "white";
 CW_Body.style.b order  =  "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 b order=0>";
 temp += "<tr style=';font-size:12px;background:#0099CC;height:20;curs or: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='col or:#ffffff;padding-left:5px'>Chromeless Window F or IE6 SP1</td>";
 temp += "<td style='col or:#ffffff;padding-right:5px;' align=right>";
 temp += "<span id=Help  onclick=\"alert('Chromeless Window F or IE6 SP1  -  Ver 1.0\\n\\nCode By Windy_sk\\n\\nSpecial Thanks F or 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>

電話號碼的驗證

要求：
　　(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 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">

具有在輸入非數字字元不回顯的效果，即對非數字字元的輸入不作反應。
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.$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
var str=str.replace(/0(\d)/g,"$1");
str=str.replace(/0(\d)/g,"$1");
window.alert(str);


//一下是取資料的類
//Obj引數指定資料的來源(限定Table),預設第一行為欄位名稱行
//GetTableData類提供MoveNext方法,引數是表的行向上或向下移動的位數,正數向下移動,負數向上.
//GetFieldData方法獲得指定的列名的資料
//S ort_desc方法對指定的列按降序排列
//S ort_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();
  f or (i=0;i< iRow;i++){
   TableData[i]=new Array();
   f or (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
 {
 f or (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 s ort_desc(){//降序
 var colindex=-1;
 var highindex=-1;
 desc_array=new Array();
 var i,j;
f or (n=0; n<arguments.length; n++){
 Field=arguments[arguments.length-1-n];
 f or (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];
  f or(i=1;i<this.rows;i++){
  desc_array[i]=this.TableData[1];
  highindex=1;
   f or(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 s ort_asc(){//升序
 var colindex=-1;
 var highindex=-1;
 var i,j;
f or (n=0; n<arguments.length; n++){
   asc_array=new Array();
   Field=arguments[arguments.length-1-n];
   f or (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];
     f or(i=1;i<this.rows;i++){
     asc_array[i]=this.TableData[1];
     highindex=1;
      f or(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;
  }
 
   f or(j=0;j<this.cols;j++){
      if  (this.TableData[0][j]==Field){
     colindex=j;
     }
   }
   if (colindex!=-1){
  
   f or(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
 {
 f or (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.S ort_asc = s ort_asc;
GetTableData.prototype.S ort_desc = s ort_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函式

//Enter鍵換為tab
function enterToTab()
{
    if(event.srcElement.type != 'button' && event.srcElement.type != 'textarea'
       && event.keyCode == 13)
    {
        event.keyCode = 9;
    }
}

有時候還需要自由編輯表格---
給大家一個自由編輯表格的小例子,寫的有點亂,呵呵:）

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


<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>測試修改表格</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: 宋體;
  font-size:12px;
  POSITION: absolute;
  BACKGROUND-COLOR: #f6f6f6;
  TOP:30px;
  LEFT:30px;
}
/*tr的樣式*/
tr
{
    font-family: "宋體";
    col or: #000000;
    background-col or: #C1DBF5;
    font-size: 12px
}
/*table腳註樣式*/
.TrFoot
{
    FONT-SIZE: 12px;
    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: 12px;
    FONT-FAMILY: "宋體","Verdana";
    col or: #000000;
    BACKGROUND-COLOR: #E9EFF5;
}
/*button樣式*/
button
{
    BORDER-COLOR: #AACEF7 #AACEF7 #AACEF7 #AACEF7;
    BACKGROUND-COLOR: #D5E4F3;
    CURSOR: hand;
    FONT-SIZE:12px;
    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">
<!--全域性變數
//標誌位,值為false代表未開啟一個編輯框,值為true為已經開啟一個編輯框開始編輯
var editer_table_cell_tag = false;
//開啟編輯功能標誌,值為true時為允許編輯
var run_edit_flag = false;
//-->
</SCRIPT>

<SCRIPT language = "java script">
<!--
/**
 * 編輯表格函式
 * 單擊某個單元格可以對裡面的內容進行自由編輯
 * @para tableID 為要編輯的table的id
 * @para noEdiID 為不要編輯的td的ID,比如說table的標題
 * 可以寫為<TD id="no_editer">自由編輯表格</TD>
 * 此時該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 = "請先點確定按鈕確認修改!"; 
 }
 else
 {
  return false;
 }
}

/**
 * 確定修改
 */
function certainEdit()
{
 var bObject = event.srcElement;
 var tdObject = bObject.parentNode;
 var txtObject = tdObject.firstChild;
 tdObject.innerHTML = txtObject.value;
 //代表編輯框已經關閉
 editer_table_cell_tag = false;
 //修改按鈕提示資訊
 editTip.innerText = "請單擊某個單元格進行編輯!";
}

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

/**
 * 控制是否編輯
 */
function editStart()
{
 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;
  }
 }
}

/**
 * 根據不同的按鈕提供不同的提示資訊
 */
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%">單擊開始編輯按鈕,然後點選各單元格編輯</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="開始編輯" onClick="editStart()" onMouseOver="showTip()" onMouseMove="showTip()" onMouseOut="editTip.style.visibility = 'hidden';">
  </TD>
 </TR>
</TABLE>
</BODY>
<DIV id="editTip">請單擊某個單元格進行編輯!</DIV>
</HTML>

相關文章