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