B/S開發常用JavaScript技術

weixin_34262482發表於2005-12-22

一、驗證類
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/>

</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> </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>

１．身份證嚴格驗證：

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);

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}$)

具有在輸入非數字字元不回顯的效果，即對非數字字元的輸入不作反應。
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 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">

</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>

在b/s開發中經常用到的javaScript技術
2005-07-21
JavaScript
最新的B/S開發技術 (轉)
2007-12-12
C/S、B/S軟體技術上的比較
2005-04-05
J2EE開發常用開源框架技術
2015-05-04
框架
讀《JavaScript核心技術開發解密》筆記
2019-06-21
JavaScript解密筆記
19 個 JavaScript 常用的簡寫技術
2017-06-22
JavaScript
前端開發技術-剖析JavaScript單執行緒
2021-07-20
前端JavaScript執行緒
【華為雲技術分享】物聯網常用開發板
2020-09-03
web前端技術分享：常用JavaScript框架有哪些？
2021-12-09
Web前端JavaScript框架
系統開發中的B/S架構
2021-12-23
架構
Web前端開發工程師常用技術網站整理
2017-10-07
Web前端工程師網站
前端開發技術-剖析JavaScript單執行緒原創
2022-01-11
前端JavaScript執行緒
Web前端技術分享：全棧工程師常用的開發工具
2022-01-13
Web前端全棧工程師
ES6常用總結 (前端開發js技術進階提升)
2020-11-23
前端JS
Java Web開發技術
2017-03-08
JavaWeb
生鮮 B2B 如何搭建高效的技術團隊（B2B 技術共享第四篇）
2018-06-09
B站基於K8S的雲原生混部技術實踐
2022-12-29
K8S
前端開發技術的發展
2013-02-05
前端
javascript 技術精要
2018-03-22
JavaScript
B站投資終極幻境，後者經營遊戲軟體的技術開發
2021-07-21
遊戲
達贊系統技術開發/達贊DAS模式技術開發詳情
2023-05-05
模式
S2B2C社交電商系統怎麼開發？
2020-06-03
區塊鏈技術開發
2022-06-07
區塊鏈
Google 開發技術快報 #87
2017-11-13
Go
oraclle 開發技術集錦
2009-12-10
用技術的“信條”，開啟AI to B的產業位移
2020-09-08
AI產業
如何從 0 到 1 搭建生鮮 B2B 的技術體系（B2B 技術共享第五篇）
2018-06-09
佛薩奇2.0合約系統技術開發/python技術開發框架
2023-05-17
Python框架
生城世朝農場合成系統開發技術/合成遊戲/技術開發
2023-04-23
遊戲
開發Webview的技術，小的技術知識點
2014-10-27
WebView
重視B/S架構系統的發展和開發設計理念
2013-02-19
架構
Javascript 技術原理剖析
2018-06-01
JavaScript
生鮮 B2B 技術平臺的前端團隊該如何搭建（B2B 技術共享第七篇）
2018-06-09
前端
宋小菜技術如何應對生鮮 B2B 業務的快速變化（B2B 技術共享第六篇）
2018-06-09
面試開發常用的 JavaScript 知識點總結
2016-08-07
面試JavaScript
APP常用抓包技術
2020-11-20
APP
常用的技術連結
2017-05-01
下一代的B/S開發框架--Echo 教程(6) (轉)
2008-05-26
框架

B/S開發常用JavaScript技術

相關文章