js修改table中Td的值(定義td的雙擊事件)
更新時(shí)間:2013年01月10日 14:23:36 作者:
這次是更改后的代碼實(shí)現(xiàn)以下功能:去掉了“確定”,“取消”按鈕。變單擊為雙擊事件,用戶按ESC鍵,取消更改感興趣的朋友可以了解下
客戶需求至上。
這次是更改后的代碼,去掉了“確定”,“取消”按鈕。變單擊為雙擊事件,用戶按ESC鍵,取消更改。
//為每個(gè)Td添加雙擊事件
function ReWritable()
{
var tbmian=document.getElementById("tbmain");
//循環(huán),為每行每列添加雙擊事件,但是,第一行(thead)與最后一行(tfoot)不添加。
for(var i=1;i<tbmain.rows.length-1;i++)
{
for(var j=0;j<tbmain.rows[i].cells.length;j++)
{
tbmain.rows[i].cells[j].ondblclick=TdDoubleClick;
}
}
}
//定義td的雙擊事件,為其添加文本框,使用用戶可以輸入。
function TdDoubleClick()
{
//首先判斷是不是該方格已經(jīng)存在文本框,如果存在,則返回,不重復(fù)添加文本框。如果不存在,則添加。
var tdcag=document.getElementById("tdcag");
var tdid=null;
var txtid=null;
var curtd=window.event.srcElement;
if(tdcag!=null)//已經(jīng)存在,返回。
{
return;
}
//不存在,則添加
tdid=window.event.srcElement;
tdtxt=tdid.innerText;
tdtxt=Trim(tdtxt);
var str="<div id='tdcag'><input type='text' onblur='ChangeTdText();' id='txtId' value='"+tdtxt+"'>";
str+="<input type='hidden' id='tdInitValue' value='"+tdtxt+"'>";
str+="</div>";
tdid.innerHTML=str;
//使文本框獲得焦點(diǎn)。
document.getElementById("txtId").focus();
var ctr=document.getElementById("txtId").createTextRange();
ctr.collapse(false);
ctr.select();
}
//去除字符串前后的空格。
function Trim(str)
{
return str.replace(/(^\s*)|(\s*$)/g, "");
}
//定義KeyPress按下時(shí)的事件,如果是ESC鍵,則取消更改,恢復(fù)為更改前的值。
document.onkeypress = function EscKeyPress()
{
if(event.keyCode==27)
{
CancelTdChanged();
return;
}
}
//取消更改,
function CancelTdChanged()
{
var tdInitValue=document.getElementById("tdInitValue");
var tdtxt=tdInitValue.value;
var tdid=document.getElementById("tdcag").parentNode;
tdid.innerText=Trim(tdtxt);
}
//確定更改,
function ChangeTdText()
{
var txtId=document.getElementById("txtId");
if(txtId==null)
{
return;
}
var tdid=document.getElementById("tdcag").parentNode;
tdid.innerText=Trim(txtId.value);
return;
}
其它代碼,與以前相同。只是取消了對表的Thead與Tfoot的更改。
<body onload="ReWritable();">
<table id="tbmain" style="width:100%;" border="1">
<thead>
<tr>
<td>thead,thead,thead</td>
</tr>
</thead>
<tfoot>
<tr>
<td>
tfoot,tfoot,tfoot
</td>
</tr>
</tfoot>
<tr>
<td>11
</td>
<td>12
</td>
<td>13</td>
</tr>
<tr>
<td>21
</td>
<td>22
</td>
<td>23
</td>
</tr>
<tr>
<td>31
</td>
<td>32
</td>
<td>33
</td>
</tr>
</table>
</body>
這次是更改后的代碼,去掉了“確定”,“取消”按鈕。變單擊為雙擊事件,用戶按ESC鍵,取消更改。
復(fù)制代碼 代碼如下:
//為每個(gè)Td添加雙擊事件
function ReWritable()
{
var tbmian=document.getElementById("tbmain");
//循環(huán),為每行每列添加雙擊事件,但是,第一行(thead)與最后一行(tfoot)不添加。
for(var i=1;i<tbmain.rows.length-1;i++)
{
for(var j=0;j<tbmain.rows[i].cells.length;j++)
{
tbmain.rows[i].cells[j].ondblclick=TdDoubleClick;
}
}
}
//定義td的雙擊事件,為其添加文本框,使用用戶可以輸入。
function TdDoubleClick()
{
//首先判斷是不是該方格已經(jīng)存在文本框,如果存在,則返回,不重復(fù)添加文本框。如果不存在,則添加。
var tdcag=document.getElementById("tdcag");
var tdid=null;
var txtid=null;
var curtd=window.event.srcElement;
if(tdcag!=null)//已經(jīng)存在,返回。
{
return;
}
//不存在,則添加
tdid=window.event.srcElement;
tdtxt=tdid.innerText;
tdtxt=Trim(tdtxt);
var str="<div id='tdcag'><input type='text' onblur='ChangeTdText();' id='txtId' value='"+tdtxt+"'>";
str+="<input type='hidden' id='tdInitValue' value='"+tdtxt+"'>";
str+="</div>";
tdid.innerHTML=str;
//使文本框獲得焦點(diǎn)。
document.getElementById("txtId").focus();
var ctr=document.getElementById("txtId").createTextRange();
ctr.collapse(false);
ctr.select();
}
//去除字符串前后的空格。
function Trim(str)
{
return str.replace(/(^\s*)|(\s*$)/g, "");
}
//定義KeyPress按下時(shí)的事件,如果是ESC鍵,則取消更改,恢復(fù)為更改前的值。
document.onkeypress = function EscKeyPress()
{
if(event.keyCode==27)
{
CancelTdChanged();
return;
}
}
//取消更改,
function CancelTdChanged()
{
var tdInitValue=document.getElementById("tdInitValue");
var tdtxt=tdInitValue.value;
var tdid=document.getElementById("tdcag").parentNode;
tdid.innerText=Trim(tdtxt);
}
//確定更改,
function ChangeTdText()
{
var txtId=document.getElementById("txtId");
if(txtId==null)
{
return;
}
var tdid=document.getElementById("tdcag").parentNode;
tdid.innerText=Trim(txtId.value);
return;
}
其它代碼,與以前相同。只是取消了對表的Thead與Tfoot的更改。
復(fù)制代碼 代碼如下:
<body onload="ReWritable();">
<table id="tbmain" style="width:100%;" border="1">
<thead>
<tr>
<td>thead,thead,thead</td>
</tr>
</thead>
<tfoot>
<tr>
<td>
tfoot,tfoot,tfoot
</td>
</tr>
</tfoot>
<tr>
<td>11
</td>
<td>12
</td>
<td>13</td>
</tr>
<tr>
<td>21
</td>
<td>22
</td>
<td>23
</td>
</tr>
<tr>
<td>31
</td>
<td>32
</td>
<td>33
</td>
</tr>
</table>
</body>
您可能感興趣的文章:
- 設(shè)置jsf的選擇框h:selectOneMenu為不可編輯狀態(tài)的方法
- JS實(shí)現(xiàn)鼠標(biāo)單擊與雙擊事件共存
- Js實(shí)現(xiàn)雙擊鼠標(biāo)自動(dòng)滾動(dòng)屏幕的示例代碼
- js jq 單擊和雙擊區(qū)分示例介紹
- javascript 單選按鈕 單擊選中 雙擊取消選擇實(shí)現(xiàn)代碼
- jquery.jstree 增加節(jié)點(diǎn)的雙擊事件代碼
- javascript 雙擊文本框編輯功能代碼
- js添加刪除行和雙擊變文本框的腳本
- JS實(shí)現(xiàn)雙擊內(nèi)容變?yōu)榭删庉嫚顟B(tài)
相關(guān)文章
全面解析JS字符串和正則表達(dá)式中的match、replace、exec等函數(shù)
這篇文章主要介紹了全面解析JS字符串和正則表達(dá)式中的match、replace、exec等函數(shù)的相關(guān)資料,需要的朋友可以參考下2016-07-07js常用節(jié)點(diǎn)操作實(shí)例總結(jié)
這篇文章主要介紹了js常用節(jié)點(diǎn)操作,結(jié)合實(shí)例形式總結(jié)分析了JavaScript針對dom節(jié)點(diǎn)的遍歷、查找、創(chuàng)建、刪除、克隆等相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2023-04-04document.body.scrollTop 值總為0的解決方法 比較常見的標(biāo)準(zhǔn)問題
頁面具有 DTD(或者說指定了 DOCTYPE)時(shí),使用 document.documentElement。2009-11-11