html状态变化实现,教你使用把div层变成可编辑的状态，非常简单粗暴有效

在你的html页面上添加

where you are?

下面是实现的jquery代码

$("div[class='content']").live('click',function(){

var divedit = $(this);

if (divedit.children("input").length > 0) {

return false;

}

var inputIns = $(""); //创建input 输入框

var oldtext = $(this).html(); //保存原有的值

inputIns.width(divedit.width()); //设置INPUT与DIV宽度一致

inputIns.val(divedit.html()); //将本来单元格DIV内容copy到插入的文本框INPUT中

divedit.html(""); //删除原来单元格DIV内容

inputIns.appendTo(divedit).focus().select(); //将需要插入的输入框代码插入DOM节点中

inputIns.click(function () {

return false;

});

//处理回车和ESC事件

inputIns.keyup(function (event) {

var keycode = event.which;

if (keycode == 13) {

divedit.html($(this).val()); //设置新值

}

if (keycode == 27) {

divedit.html(oldtext); //返回旧值

}

}).blur( function (event) {

if($(this).val() != oldtext && window.confirm('是否保存修改值!')){

divedit.html($(this).val());

}else{

divedit.html(oldtext);

}

}

);

});