- 作者： wokankan 2005年04月29日, 星期五 18:54 回復（0） | 引用（0） 加入博采
?常用javascript
b/s開發常用javaScript技術
2004-01-24??? 嵐·LEN????
在每個文本框的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 = "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>
?
?
?
posted on 2006-05-12 18:51
Stellar.He 閱讀(97)
評論(0) 編輯 收藏