亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

js修改table中Td的值(定義td的雙擊事件)

 更新時間:2013年01月10日 14:23:36   作者:  
這次是更改后的代碼實現(xiàn)以下功能:去掉了“確定”,“取消”按鈕。變單擊為雙擊事件,用戶按ESC鍵,取消更改感興趣的朋友可以了解下
客戶需求至上。
這次是更改后的代碼,去掉了“確定”,“取消”按鈕。變單擊為雙擊事件,用戶按ESC鍵,取消更改。
復(fù)制代碼 代碼如下:

//為每個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;
//使文本框獲得焦點。
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按下時的事件,如果是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>

相關(guān)文章

  • js獲取域名的方法

    js獲取域名的方法

    這篇文章主要介紹了js獲取域名的方法,涉及window.location中常見方法的使用技巧,需要的朋友可以參考下
    2015-01-01
  • IE6、IE7中獲取Button元素的值的bug說明

    IE6、IE7中獲取Button元素的值的bug說明

    IE6、IE7中獲取Button元素的值的bug說明,大家在以后使用dom操作的朋友可以注意下。
    2011-08-08
  • 全面解析JS字符串和正則表達式中的match、replace、exec等函數(shù)

    全面解析JS字符串和正則表達式中的match、replace、exec等函數(shù)

    這篇文章主要介紹了全面解析JS字符串和正則表達式中的match、replace、exec等函數(shù)的相關(guān)資料,需要的朋友可以參考下
    2016-07-07
  • 微信小程序基礎(chǔ)教程之worker線程的使用方法

    微信小程序基礎(chǔ)教程之worker線程的使用方法

    這篇文章主要給大家介紹了關(guān)于微信小程序基礎(chǔ)教程之worker線程的使用方法,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • js實現(xiàn)簡單掃雷

    js實現(xiàn)簡單掃雷

    這篇文章主要為大家詳細介紹了js實現(xiàn)簡單掃雷,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • TypeScript語法詳解之類型操作的補充

    TypeScript語法詳解之類型操作的補充

    TypeScript最大的一個特點就是變量是強類型的,也就是說在聲明變量的時候我們必須給他一個類型,下面這篇文章主要給大家介紹了關(guān)于TypeScript語法詳解之類型操作的補充,需要的朋友可以參考下
    2022-08-08
  • javascript 代碼是如何被壓縮的示例代碼

    javascript 代碼是如何被壓縮的示例代碼

    這篇文章主要介紹了javascript 代碼是如何被壓縮的,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-05-05
  • JavaScript基礎(chǔ)之流程控制語句的用法

    JavaScript基礎(chǔ)之流程控制語句的用法

    下面就為大家?guī)硪黄狫avaScript基礎(chǔ)之流程控制語句的用法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • js常用節(jié)點操作實例總結(jié)

    js常用節(jié)點操作實例總結(jié)

    這篇文章主要介紹了js常用節(jié)點操作,結(jié)合實例形式總結(jié)分析了JavaScript針對dom節(jié)點的遍歷、查找、創(chuàng)建、刪除、克隆等相關(guān)實現(xiàn)技巧與注意事項,需要的朋友可以參考下
    2023-04-04
  • document.body.scrollTop 值總為0的解決方法 比較常見的標準問題

    document.body.scrollTop 值總為0的解決方法 比較常見的標準問題

    頁面具有 DTD(或者說指定了 DOCTYPE)時,使用 document.documentElement。
    2009-11-11

最新評論