当前位置:萝卜系统下载站 > 技术开发教程 > 详细页面

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