在B/S開發(fā)中經(jīng)常用到的JavaScript技術(shù)
更新時間:2008年05月28日 22:55:40 作者:
javascript運用中,經(jīng)常用到的代碼,建議每段代碼都要看下,注意本文有三頁,仔細看玩,逐個研究透徹,那么網(wǎng)頁中常見的問題,你也就熟悉掌握了
有時候還需要自由編輯表格---
給大家一個自由編輯表格的小例子,寫的有點亂,呵呵:)
//===============================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">
<!--全局變量
//標(biāo)志位,值為false代表未打開一個編輯框,值為true為已經(jīng)打開一個編輯框開始編輯
var editer_table_cell_tag = false;
//開啟編輯功能標(biāo)志,值為true時為允許編輯
var run_edit_flag = false;
//-->
</SCRIPT>
<SCRIPT language = "JavaScript">
<!--
/**
* 編輯表格函數(shù)
* 單擊某個單元格可以對里面的內(nèi)容進行自由編輯
* @para tableID 為要編輯的table的id
* @para noEdiID 為不要編輯的td的ID,比如說table的標(biāo)題
* 可以寫為<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;
//代表編輯框已經(jīng)關(guān)閉
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
{
//如果當(dāng)前沒有編輯框,則編輯成功,否則,無法提交
//必須按確定按鈕后才能正常提交
if(editer_table_cell_tag == false)
{
alert("編輯成功結(jié)束!");
event.srcElement.value = "開始編輯";
run_edit_flag = false;
}
}
}
/**
* 根據(jù)不同的按鈕提供不同的提示信息
*/
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>
相關(guān)文章
javascript 限制輸入和粘貼(IE和火狐3.x下測試通過)
限制輸入和粘貼的js代碼2008-11-11JavaScript數(shù)組去重的方法總結(jié)【12種方法,號稱史上最全】
這篇文章主要介紹了JavaScript數(shù)組去重的方法,結(jié)合實例形式較為詳細的總結(jié)分析了12種方法數(shù)組去重的方法,需要的朋友可以參考下2019-02-02javascript 不停(setInterval)/延時(setTimeout)函數(shù)使用實例
如果想實現(xiàn)頁面的一些函數(shù)的定時執(zhí)行,需要用到下面的函數(shù)大家可以看下用法。2009-08-08在 JavaScript 中保留小數(shù)點后兩位的方法
在 JavaScript 中,有多種方法可以保留小數(shù)點后兩位,本文給大家分享比較常用的方法,文末給大家介紹了實現(xiàn)數(shù)據(jù)格式化保留兩位小數(shù)的多種方法,感興趣的朋友一起看看吧2023-10-10