當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > 編程其他 > JS代碼實現類C#GridView的編輯效果(2)

JS代碼實現類C#GridView的編輯效果(2)

2012/10/31 20:23:49作者：佚名來源：網絡

移動端

【實例名稱】

JS代碼實現類C#GridView的編輯效果（2）

【實例描述】

表格內可直接輸入文本，輸入完畢后，還可以將內容自動保存在單元格內。本例實現的就是表格的這種編輯功能。

【實例代碼】

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>新文檔-???www.yzddtk.cn</title>
</table>
</body>
</html>
<script language="javascript">
oldObj="";
var newInput=document.createElement("input");           
 //動態創建輸入框
newInput.type="text";                                    
//輸入框類型
function setEdit(e){                                    
//設置編輯時的狀態
    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');
//判斷是否已經存在輸入框
   oldObj.removeChild(tobj);                       
//移除已經存在的輸入框
   if(newInput.vlaue=="")                          
//初始化輸入框的值
              oldObj.innerHTML="&nbsp;";
   else 
              oldObj.innerHTML=newInput.value;              
//輸入框的內容等于單元格的內容
  }
  
  obj=tdObj;
  oldObj=obj;
  newInput.width=obj.offsetWidth;                    
 //輸入框的高度和寬度
  newInput.height=obj.offsetHeight;
  newInput.id="tmpText";
  newInput.value=obj.innerHTML;
  obj.innerHTML="";
  obj.appendChild(newInput);                         
 //將輸入框添加到單元格內
  newInput.focus();                                   
//輸入框獲得焦點
 }
    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;                 
  //單擊對象的祖父節點
  if(oldObj!=""){
            var tobj = document.getElementById('tmpText'); 
 //獲取輸入框
   oldObj.removeChild(tobj);                       
//移除舊輸入框
   if(newInput.vlaue=="") 
              oldObj.innerHTML="&nbsp;";            
//單元格的初始值
   else 
              oldObj.innerHTML=newInput.value;      
//單元格的內容等于輸入框的內容
            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>

【運行效果】

運行效果

【難點剖析】

本例的原理是當用戶單擊單元格時，自動生成一個用于輸入的“input”控件，此控件的高度和寬度與單元格相同，其值也等于單元格的內容。當鼠標離開單元格時，隱藏此輸入框并設置單元格的內容等于輸入框的值。

【源碼下載】

如果你不愿復制代碼及提高代碼準確性，你可以點擊：類C#GridView的編輯效果（2）進行本實例源碼下載

標簽：

上一篇：JS代碼實現類C#GridView的編輯效果(1)
下一篇：Win8正式版多少錢正版Win8多少錢

相關文章

熱門軟件/ 推薦游戲/ 手機軟件

資訊分類

Dreamweaver Flash DIV+CSS 編程其他

推薦教程

精品軟件推薦

360安全衛士

訊飛輸入法

欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频视频,欧美一级特黄录像视频