雙擊單元格變?yōu)榭删庉婮S代碼怎么寫

2012/10/31 20:18:57作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

雙擊單元格變?yōu)榭删庉?/p>

【實(shí)例描述】

ASP.NET中提供了多個(gè)表格編輯控件，可通過(guò)雙擊實(shí)現(xiàn)單元格的編輯。本例介紹一種方法，可實(shí)現(xiàn)雙擊單元格編HTML表格的功能。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁(yè)-學(xué)無(wú)憂（yzddtk.cn）</title>
<script>
function editCell(obj){
    if(obj.innerText==""){
      obj.innerHTML="<input value='' 
onblur='update(this.value)'>";               
//插入輸入框，失去焦點(diǎn)時(shí)更新
    }else{
      obj.innerHTML="<input value="+obj.innerText+
" onblur='update(this.value)'>";//插入文本框，且指定內(nèi)容
    }
}
function update(txt){
    document.getElementById("Td2").innerText=txt; 
 //文本框失去焦點(diǎn)時(shí)，需要更新表格的內(nèi)容
}
</script>
</head>
<body>
<table border="1"><tr><td id="Td2" 
onDblClick="editCell(this)">第一行第一列</td>
</tr></table></body>
</html>

【運(yùn)行效果】

默認(rèn)生成的表格

運(yùn)行效果

雙擊單元格后的表格

運(yùn)行效果

【難點(diǎn)剖析】

本例的重點(diǎn)是在表格內(nèi)動(dòng)態(tài)添加“input”控件。因?yàn)樘砑拥拇a中有HTML語(yǔ)句，所以必須使用“innerHTML”屬性實(shí)現(xiàn)“input”控件的動(dòng)態(tài)插入。如果表格中已經(jīng)有值，需要設(shè)置新“input”控件的“value”屬性。當(dāng)文本框被改變且失去焦點(diǎn)時(shí)，需要將文本框的內(nèi)容更新回表格。本例通過(guò)“update”方法實(shí)現(xiàn)這種更新。

【源碼下載】

如果你不愿復(fù)制代碼及提高代碼準(zhǔn)確性，你可以點(diǎn)擊：雙擊單元格變?yōu)榭删庉?/span> 進(jìn)行本實(shí)例源碼下載

標(biāo)簽：表格 JS代碼