JS代碼實(shí)現(xiàn)類C#GridView的編輯效果(2)

2012/10/31 20:23:49作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

JS代碼實(shí)現(xiàn)類C#GridView的編輯效果（2）

【實(shí)例描述】

表格內(nèi)可直接輸入文本，輸入完畢后，還可以將內(nèi)容自動(dòng)保存在單元格內(nèi)。本例實(shí)現(xiàn)的就是表格的這種編輯功能。

【實(shí)例代碼】

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>新文檔-???yzddtk.cn</title>
</table>
</body>
</html>
<script language="javascript">
oldObj="";
var newInput=document.createElement("input");           
 //動(dòng)態(tài)創(chuàng)建輸入框
newInput.type="text";                                    
//輸入框類型
function setEdit(e){                                    
//設(shè)置編輯時(shí)的狀態(tài)
    var tdObj = e.srcElement? e.srcElement : (e.target ? e.target : e);
//單擊的對象
 var obj;
 if(tdObj.tagName && tdObj.tagName=="TD"){           
//判斷是否是單元格
  if(oldObj!=""){
            var tobj = document.getElementById('tmpText');
//判斷是否已經(jīng)存在輸入框
   oldObj.removeChild(tobj);                       
//移除已經(jīng)存在的輸入框
   if(newInput.vlaue=="")                          
//初始化輸入框的值
              oldObj.innerHTML="&nbsp;";
   else 
              oldObj.innerHTML=newInput.value;              
//輸入框的內(nèi)容等于單元格的內(nèi)容
  }
  
  obj=tdObj;
  oldObj=obj;
  newInput.width=obj.offsetWidth;                    
 //輸入框的高度和寬度
  newInput.height=obj.offsetHeight;
  newInput.id="tmpText";
  newInput.value=obj.innerHTML;
  obj.innerHTML="";
  obj.appendChild(newInput);                         
 //將輸入框添加到單元格內(nèi)
  newInput.focus();                                   
//輸入框獲得焦點(diǎn)
 }
    tdObj = obj = tobj = null;
}
function checkAdd(e){
    if(e && e.keyCode == 13){                               
//
       var obj = e.srcElement? e.srcElement : e.target;     
 //獲得單擊對象
       var tbl = obj.parentNode.parentNode;                 
  //單擊對象的祖父節(jié)點(diǎn)
  if(oldObj!=""){
            var tobj = document.getElementById('tmpText'); 
 //獲取輸入框
   oldObj.removeChild(tobj);                       
//移除舊輸入框
   if(newInput.vlaue=="") 
              oldObj.innerHTML="&nbsp;";            
//單元格的初始值
   else 
              oldObj.innerHTML=newInput.value;      
//單元格的內(nèi)容等于輸入框的內(nèi)容
            var oldObj2 = oldObj;
            oldObj = '';
  }
       if(tbl.tagName && tbl.tagName == 'TR'){         
 //如果是單元行
         t2 = tbl.cloneNode(true);                      
//克隆表格
         tbl.parentNode.insertBefore(t2,tbl);          
 //插入行
       }
       setEdit(oldObj2);                                
  //開始編輯
    }
    obj = tbl = tobj = t2 = oldObj2 = null;
}
</script>
</body>
</html>

【運(yùn)行效果】

運(yùn)行效果

【難點(diǎn)剖析】

本例的原理是當(dāng)用戶單擊單元格時(shí)，自動(dòng)生成一個(gè)用于輸入的“input”控件，此控件的高度和寬度與單元格相同，其值也等于單元格的內(nèi)容。當(dāng)鼠標(biāo)離開單元格時(shí)，隱藏此輸入框并設(shè)置單元格的內(nèi)容等于輸入框的值。

【源碼下載】

如果你不愿復(fù)制代碼及提高代碼準(zhǔn)確性，你可以點(diǎn)擊：類C#GridView的編輯效果（2）進(jìn)行本實(shí)例源碼下載

標(biāo)簽： JS代碼 C#GridView 編輯效果