JavaScript 就地编辑HTML节点实现代码

点击编辑当前内容

var EditField={
configure:function(id){
this.id=id;

this.createElements(); //动态生成编辑输入框
this.toScan(); //初始化动态生成的输入框和按钮、待编辑的DOM元素的display属性
this.addEvents(); //给相关的DOM元素添加事件监听器
},
events:function(elem,type,fn){ //用于添加事件的通用函数
if(elem.attachEvent){
elem.attachEvent("on"+type,fn);
}else if(elem.addEventListener){
elem.addEventListener(type,fn,false);
}else{
elem["on"+type]=fn;
}
return elem;
},
addEvents:function(){ //添加事件
var that=this;
this.events(this.btnSubmit,"click",function(){
that.save();
});
this.events(this.btnCancel,"click",function(){
that.cancel();
});
this.events(document.getElementById(this.id),"click",function(){
that.toEdit();
});
},
insertAfter:function(newNode,referenceNode){ //将动态生成的输入框和按钮插入到待编辑元素的后面
if (referenceNode.nextSibling) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}else{
var p=referenceNode.parentNode || document.body;
p.appendChild(newNode);
}
},
createElements:function(){ //动态生成输入框和按钮
this.divContainer=document.createElement("div");
//this.parentElement.appendChild(this.divContainer);
this.insertAfter(this.divContainer,document.getElementById(this.id));

this.input=document.createElement("input");
this.input.type="text";
this.input.value=document.getElementById(this.id).innerHTML; //初始化值
this.divContainer.appendChild(this.input);

this.btnSubmit=document.createElement("input");
this.btnSubmit.value="Submit";
this.btnSubmit.type="button";
this.divContainer.appendChild(this.btnSubmit);

this.btnCancel=document.createElement("input");
this.btnCancel.type="button";
this.btnCancel.value="Cancel";
this.divContainer.appendChild(this.btnCancel);

},
toEdit:function(){ //转换成编辑状态
this.divContainer.style.display="block";
document.getElementById(this.id).style.display="none";
this.setValue();
},
toScan:function(){ //转换成浏览状态
document.getElementById(this.id).style.display="block";
this.divContainer.style.display="none";
},
getValue:function(){ //获取输入框的值
return this.input.value;
},
setValue:function(){ //设置输入框的值
this.input.value=document.getElementById(this.id).innerHTML;
},
save:function(){ //保存编辑结果
document.getElementById(this.id).innerHTML=this.getValue();
this.toScan();
},
cancel:function(){ //取消当前的编辑
this.toScan();
}
};

onload=function(){
EditField.configure("p"); //调用configure函数,确定那个DOM元素进行就地编辑
}

Edit Demo

我们 www.jb51.net

Copyright:Super sha.

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

时间: 2009-07-19

javascript得到XML某节点的子节点个数的脚本

a.xml: 复制代码 代码如下: <?xml version="1.0" encoding="gb2312"?> <pnode> <node xmlId="0" /> <node xmlId="1" /> <node xmlId="2" /> <node xmlId="3" /> <node xmlId=&q

javascript获取dom的下一个节点方法

利用javascript 写一个在页面点击加减按钮实现数字的累加. 简略的html大概如此.看得懂就好不要在意这些细节啊 <input type="button" value="+" onclick="jia(this)" /> <label class="num">0</label> <input type="button" value="-"

javascript下查找父节点的简单方法

<div>        <a href="#">标题</a>        <ul id="demo">            <li><a href="#" onclick="selectThisItem(this)">项目一</a></li>                <ul>                 

javascript实现节点(div)名称编辑

节点html代码如下: 复制代码 代码如下: <div class="img_1" id="img_1" >      <input type="image" class="img_1" src="img/cump.png"></input>      <div class="noteText" id="noteTxt" ty

JavaScript 用cloneNode方法克隆节点的代码

很多时候我们会用for 来生成多个结构相同的节点结构,这样我们需要写很多createElement.setAttribute.appendChild 等代码. 但其实我们只需要有一个html 的模板,就可以用cloneNode 方法对已有的节点进行克隆,包括其子节点. 以下是cloneNode 方法原型: newElement oldElement.cloneNode(bool deep); 这个方法只有一个参数deep,布尔值,如果为true,则克隆oldElement 这个及其子节点,否则只

javascript dom操作之cloneNode文本节点克隆使用技巧

true:完全的复制一个节点,什么叫完全呢,就是复制一切,包括他的子节点,以至于文本节点,凡是有的,一律克隆,所谓完全 false:只克隆当前节点,不克隆任何的子节点,当然也不会克隆他所包裹的文本,因为任何文本都有指向他的节点(文本节点) 当然有时候两者是可以通用的哦,如果要复制的节点没有任何的子节点,这是二者全等:比如 img... 为了让大家理解的更为深刻,举个小例子吧: 复制代码 代码如下: <div> <span>Shadow</span> |No Shadow

javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element

因为在JavaScript中,mousedown.mouseup.click执行顺序是从左到右的,更重要的是一旦mousedown事件激活,正常情况(不在mousedown事件中绑定的方法使用alert类似方法,因为弹出对象框就阻止了事件传递,即后续调用事件丢失)下后面两个事件也肯定会被激活.平时我们在一个标签上只绑定一个click事件,其实触发click事件也都调用了mousedown.mouseup等事件,只是它们调用周期极短,而且我们又没有编写相关函数与这两个事件绑定,所以不会觉察到.现在

JavaScript 节点操作 以及DOMDocument属性和方法

属性: 1Attributes 存储节点的属性列表(只读) 2childNodes 存储节点的子节点列表(只读) 3dataType 返回此节点的数据类型 4Definition 以DTD或XML模式给出的节点的定义(只读) 5Doctype 指定文档类型节点(只读) 6documentElement 返回文档的根元素(可读写) 7firstChild 返回当前节点的第一个子节点(只读) 8Implementation 返回XMLDOMImplementation对象 9lastChild 返回

javascript获取网页中指定节点的父节点、子节点的方法小结

我们在实际的开发当中经常要获取页面中某个html元素,动态的更新该元素的样式.内容属性等. 那么如何获取要更新的这些元素呢?用JavaScript获取这些节点的方法有很多种,下面是总结的一些方法. 1. 通过document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点. 如 今,已经出现了如prototype.Mootools等多

Javascript入门学习第八篇 js dom节点属性说明第1/2页

今天我们讲DOM属性. 前面其实我们已经碰过DOM属性了. 比如: nodeName,nodeType-..今天我们详细的讲解下. 1,nodeName属性  : 节点的名字. 如果节点是元素节点,那么返回这个元素的名字.此时,相当于tagName属性. 比如: <p>aaaa</p>  : 则返回 p ; 如果是属性节点,nodeName将返回这个属性的名字. 如果是文本节点,nodeName将返回一个#text的字符串. 另外我要说的是: nodeName属性是一个只读属性,不

Javascript入门学习第六篇 js DOM编程第1/2页

学习英文: Dom:文档对象模型.Document object model Bom:浏览器对象模型. 注:也可以叫窗口对象模型.(window object model.) API:应用编程接口. 注:DOM其实可以看作一种API. Node:节点. 注:节点分为:元素节点,属性节点,文本节点. 元素节点 包含 属性节点和文本节点. Dom树: 下面我们直接看 到底怎么操作DOM. 1,    创建元素节点.createElement(): <SCRIPT LANGUAGE="JavaS

Javascript入门学习第七篇 js dom实例操作第1/2页

直接从方法说起: 1,    删除节点.removeChild(): <body>  <div id="cssrain">  <div id="a">a </div>  <div id="b">b </div>  <div id="c">c </div>  </div>  </body> <script

Javascript入门学习第四篇 js对象和数组第1/2页

比较难哦.做好心里准备吧...... 深呼吸... 1 , for  /  in : 一种遍历(枚举)对象属性的方法,可以循环我们呢事先不知道的属性. 它可以枚举处用户定义的所有属性,但却不能枚举出某些预定义的属性和方法. 不能枚举的属性通常是继承的属性 删除一个对象的属性:  delete book.width ; 从对象中移除了属性,在删除之后,用for/in将不会枚举该属性,并且用width in book 也检测不到该属性. for/in 的另一个重要的用途就是跟关联数组一起使用:(如果

Javascript入门学习第五篇 js函数第1/2页

1 ,函数: function是一个定义一次 却可以多次调用的js代码. 当一个函数被一个对象调用时,那么这个函数就叫做这个对象的方法. function cssrain( x , y) {  //code } 解释: cssrain  :  为函数名: ( )     :   为 运算符: x ,  y  :   为 参数: 2 ,函数的返回值: function a(x){     document.write(x); } function b(y){    document.write(y

Javascript入门学习第三篇 js运算第1/2页

1, 表达式: 最简单的表达式:直接量或者变量名.var a =1; 直接量表达式的值:本身. 变量表达式的值:该变量所存放或引用的值. 2 , 运算符: 一元运算符: 比如  - 3  二元运算符: 比如  3+4  三元运算符: 比如  ?   : 新手常遇到的问题: 递增运算符: 比如: i  =  1 ; j  = ++ i ; // 前递增运算,即先对运算数进行递增,然后再去计算. //输出   i  =2;    j=2 ; i  =  1 ; j  =  i ++; // 后递增运

Javascript入门学习资料收集整理篇

Javascript入门学习第一篇 js基础Javascript入门学习第二篇 js类型Javascript入门学习第三篇 js运算Javascript入门学习第四篇 js对象和数组Javascript入门学习第五篇 js函数Javascript入门学习第六篇 js DOM编程Javascript入门学习第七篇 js dom实例操作Javascript入门学习第八篇 js dom节点属性说明Javascript入门学习第九篇 Javascript DOM 总结jQuery基础教程笔记适合js新手

JavaScript事件学习小结(五)js中事件类型之鼠标事件

相关阅读: JavaScript事件学习小结(五)js中事件类型之鼠标事件 http://www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 http://www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员(属性和方法) http://www.jb51.net/article/86262.htm JavaScript事件学习小结(二)js事件处理程序 http://www

Javascript入门学习第一篇 js基础第1/2页

Javascript学习第一篇 js基础 1 , javascript字符集: javascript采用的是Unicode字符集编码. 为什么要采用这个编码呢? 原因很简单,16位的Unicode编码可以表示地球人的任何书面语言.这是语言 国际化的一个重要特征.(大家也许见过用中文写脚本,比如:function 我的函数() {}  ); Javascript中每个字符都是用2个字节表示的.(因为是16位编码) 2 ,大小写敏感: js是一种区分大小写的语言. 注意下:以前我也犯过的错误. HT

JavaScript入门教程(1) 什么是JS

JavaScript 参考教程 本教程为未接触过 JavaScript 的读者提供了比较完善的初级知识,但只限于初级知识:所有与动态网页密切相关的 JavaScript 在本教程中都未提及,包括动态定位.动画.让文档接收更多事件(document.captureEvent())等;所有在 IE 及 Netscape 中有不同的 JavaScript 都尽少提及. 本教程在结构上设计的比较像一个参考(reference),有参考的规划性,但又有教程的性质,所以我把它叫做"参考教程". 本