b/s开发中经常用到的javaScript技术

b/s开发中经常用到的javaScript技术
一、验证类
1
、数字验证内
  1.1
整数
  1.2
大于0的整数 (用于传来的ID的验证)
  1.3
负整数的验证
  1.4
整数不能大于iMax
  1.5
整数不能小于iMin
2
、时间类
  2.1
短时间,形如 (13:04:06)
  2.2
短日期,形如 (2003-12-05)
  2.3
长时间,形如 (2003-12-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 οnblur="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 οnblur="if(/[^a-zA-Z]/g.test(this.value))alert('
有错')">
  4.2
判断字符由字母和数字组成。
      <input οnblur="if(/[^0-9a-zA-Z]/g.test(this.value))alert('
有错')">
  4.3
判断字符由字母和数字,下划线,点号组成.且开头的只能是下划线和字母
      /^([a-zA-z_]{1})([/w]*)$/g.test(str)
  4.4
字符串替换函数.Replace();
5
、浏览器类
  5.1
判断浏览器的类型
      window.navigator.appName
  5.2
判断ie的版本
      window.navigator.appVersion
  5.3
判断客户端的分辨率
      window.screen.height;  window.screen.width;
 
6
、结合类
  6.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 复选框的全选,多选,全不选,反选
<form name=hrong>
<input type=checkbox name=All οnclick="checkAll('mm')">
全选<br/>
<input type=checkbox name=mm οnclick="checkItem('All')"><br/>
<input type=checkbox name=mm οnclick="checkItem('All')"><br/>
<input type=checkbox name=mm οnclick="checkItem('All')"><br/>
<input type=checkbox name=mm οnclick="checkItem('All')"><br/>
<input type=checkbox name=mm οnclick="checkItem('All')"><br/><br/>


<input type=checkbox name=All2 οnclick="checkAll('mm2')">
全选<br/>
<input type=checkbox name=mm2 οnclick="checkItem('All2')"><br/>
<input type=checkbox name=mm2 οnclick="checkItem('All2')"><br/>
<input type=checkbox name=mm2 οnclick="checkItem('All2')"><br/>
<input type=checkbox name=mm2 οnclick="checkItem('All2')"><br/>
<input type=checkbox name=mm2 οnclick="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 文件上传过程中判断文件类型
<input type=file οnchange="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//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相关(客户端动态增加行列)
<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 οnlοad="numberCells()">
<TABLE id=mytable border=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>

1.身份证严格验证:

<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 "Error:
非法地区";
 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:
非法证号";
 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>

2.验证IP地址
<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>

 

3.加sp1后还能用的无边框窗口!!
<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(οnmοuseοut=οnmοuseup=function(){this.style.borderStyle='outset'}, οnmοusedοwn=function(){if(event.button!=2)this.style.borderStyle='inset'});background-color:buttonface;width:16px;height:14px;font-size:12px;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 οnclick='parent.open(this.href);return false' $1>");
 temp += "<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>";
 temp += "<tr style=';font-size:12px;background:#0099CC;height:20;cursor:default' οndblclick=/"Max.innerText=Max.innerText=='1'?'2':'1';parent.if_max=!parent.if_max;parent.show_CW();/" οnmοuseup='parent.drag_up(event)' οnmοusemοve='parent.drag_move(event)' οnmοusedοwn='parent.drag_down(event)' onselectstart='return false' οncοntextmenu='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  οnclick=/"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   οnclick='parent.New_CW.hide();parent.blur()' style=/""+CSStext+"font-family:Webdings;/" title='Minimum'>0</span>";
 temp += "<span id=Max   οnclick=/"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 οnclick='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)电话号码为38
  (3)如果电话号码中包含有区号,那么区号为三位或四位
  (4)区号用"("")""-"和其他部分隔开
  (5)移动电话号码为1112位,如果为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 οnclick="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);


//
一下是取数据的类 http://blog.knowsky.com
//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;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;

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

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

//回车键换为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: "
宋体";
    color: #000000;
    background-color: #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";
    color: #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
为要编辑的tableid
 * @para noEdiID
为不要编辑的tdID,比如说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='
确定 ' οnclick='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"
    οnclick="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> 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值