當前位置:蘿卜系統下載站 > 技術開發教程 > 詳細頁面

JS代碼完成類C#GridView的編輯效果(2)

JS代碼完成類C#GridView的編輯效果(2)

更新時間:2023-06-20 文章作者:未知 信息來源:網絡 閱讀次數:

編程(Programming)是編定程序的中文簡稱,就是讓計算機代碼解決某個問題,對某個計算體系規定一定的運算方式,使計算體系按照該計算方式運行,并最終得到相應結果的過程。為了使計算機能夠理解(understand)人的意圖,人類就必須將需解決的問題的思路、方法和手段通過計算機能夠理解的形式告訴計算機,使得計算機能夠根據人的指令一步一步去工作,完成某種特定的任務。這種人和計算體系之間交流的過程就是編程。

【實例名稱】

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

【實例描述】

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

【實例代碼】

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <title>新文檔-???www.xue51.com</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) 進行本實例源碼下載 


使用編程語言寫的程序,由于每條指令都對應計算機一個特定的基本動作,所以程序占用內存少、執行效率高。

溫馨提示:喜歡本站的話,請收藏一下本站!

本類教程下載

系統下載排行

網站地圖xml | 網站地圖html
亚洲嫩草影院久久精品