转 在b/s开发中经常用到的javaScript技术
| 在b/s開發中經常用到的javaScript技術 |
| 一、驗證類 二、功能類 1、時間與相關控件類 一、驗證類 3.7 復選框的全選,多選,全不選,反選
</form> <SCRIPT LANGUAGE="JavaScript"> 3.8 文件上傳過程中判斷文件類型 畫圖: 寫注冊表: TABLAE相關(客戶端動態增加行列) 1.身份證嚴格驗證: <script> document.write(cidInfo("380524198002300016"),"<br/>"); 2.驗證IP地址 var s="202.197.78.129"; ? 3.加sp1后還能用的無邊框窗口!! <SCRIPT LANGUAGE="JScript"> /* /*--- Thanks For andot Again ---*/ var CW_width?= 400; //Build Window function insert_content(){ setTimeout("insert_content()",1000); var if_max = true; window.onfocus? = show_CW; // Move Window function drag_move(e){ function drag_down(e){ function drag_up(e){ </SCRIPT> 電話號碼的驗證 要求:
具有在輸入非數字字符不回顯的效果,即對非數字字符的輸入不作反應。 驗證ip str=document.RegExpDemo.txtIP.value; |
//一下是取數據的類
//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事件中寫一個enter轉tab函數
//回車鍵換為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 = "JavaScript">
<!--全局變量
//標志位,值為false代表未打開一個編輯框,值為true為已經打開一個編輯框開始編輯
var editer_table_cell_tag = false;
//開啟編輯功能標志,值為true時為允許編輯
var run_edit_flag = false;
//-->
</SCRIPT>
<SCRIPT language = "JavaScript">
<!--
/**
?* 編輯表格函數
?* 單擊某個單元格可以對里面的內容進行自由編輯
?* @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=' 確定 ' ο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>
?
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=107993
轉載于:https://www.cnblogs.com/duliang/archive/2006/10/07/522875.html
總結
以上是生活随笔為你收集整理的转 在b/s开发中经常用到的javaScript技术的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 创建带有关联的 XML 架构的 XML
- 下一篇: ADO.NET实用经验(转自代码中国)