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.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>

【运行效果】

运行效果