在线编辑小技巧(Javascript)

突然间想起了不久前看到一个不错的JS功能小技巧,觉得想法还不错~~
为了打发一下时间,就兴起写了下面的一个小段脚本 效果如下:


双击后



更新后



好了看完效果了,以下为功能实现的代码:


<title>无标题文档</title>
<script language="javascript" >

var Inline_Edit={

el:function (objID)
{
    return document.getElementById(objID);
},
Fun_ReCallBack:function (obj)
{
    this.Fun_Edit(obj);
},
Fun_Edit:function (obj)
{
     var txt= document.createElement( "input" ) ;
     txt.id="txt_"+obj.id;
     txt.type="text";
     txt.value=obj.innerHTML;
     obj.innerHTML="";
     //obj.onclick=function(e){;};
     obj.ondblclick=function(e){;};
     txt.style.display="block";
     txt.onblur=function(e){
                                var txtvalue=txt.value;
                                obj.removeChild(txt);
                                obj.innerHTML=txtvalue;
                                obj.ondblclick=function(e){Inline_Edit.Fun_Edit(obj);};
                            };
                        
     obj.appendChild(txt);
     txt.onfocus;
}
}
</script>
</head>

<body >

<span id="sp_text"  ondblclick="Inline_Edit.Fun_Edit(this)" >测试数据哦 </span>

</body>
</html>

posted on 2008-03-22 22:14  WinKen  阅读(288)  评论(0)    收藏  举报

导航