最近，一个项目已经完成。项目需要：点击表单后，可以直接编辑，输入或点击页面，然后在其他地方编辑。Esc可以取消编辑。

2个小伙伴给出了两个解决方案。哪个更适合大家看

单击可以编辑的表的第一种方法。

复制代码代码如下所示：

/ /等效在body标签的页面的onload事件

$（函数（）{（））

查找所有TD节点

var = $（）；

所有TD添加一个单击事件

Tds.click（function（）{（）

单击对象获取当前

var = $（$）；

删除当前保存的文本

无功oldtext = td.text（）；

创建一个文本框，设置文本框的值以保存该值

变量输入= $（ ）；

当前的对象内容被设置为输入。

Td.html（输入）；

设置文本框单击失败事件

Input.click（function（）{（）

返回false；

}）；

设置文本框样式

Input.css（边框宽度

Input.css（字体大小

Input.css（文本对齐

设置文本框宽度等于TD的宽度。

Input.width（td.width（））；

选择文本框具有焦点时触发的事件

Input.trigger（热点）。Trigger（选择）；

当文本框失去焦点回到文本中时

Input.blur（function（）{（）

input_blur = $（this）功；

保存文本框的当前内容

无功newtext = input_blur.val（）；

Td.html（newtext）；

}）；

响应键盘事件

Input.keyup（功能（事件）{）

获取密钥

keyEvent =事件window.event | | VaR；

var关键字= keyevent.keycode；

获取当前对象

input_blur = $（this）功；

开关（键）

{

案例13：按回车键保存当前文本框的内容

无功newtext = input_blur.val（）；

Td.html（newtext）；

打破；

案例27：按下ESC键，取消修改，并将文本框转换为文本。

Td.html（oldtext）；

打破；

}

}）；

}）；

}）；



可以编辑的第二种单击表单

复制代码代码如下所示：

$（文档）Ready（函数（）{）

var = $（）；

Tds.click（tdclick）；

}）；

功能tdclick（）{

tdnode = $（this）功；

无功tdtext = tdnode.text（）；

Tdnode.html（）；

变量输入= $（ ）；

Input.val（tdtext）； / / input.attr（价值，tdtext）；

Input.keyup（功能（事件）{）

风险事件| | window.event事件=；

VaR密码= myevent.keycode；

如果（密码= = 13）{

无功输入节点（这）= $；

VaR inputText = inputnode.val（）；

VaR技术inputnode.parent（）；

Td.html（inputText）；

Td.click（tdclick）；

}

如果（密码= = 27）{ / /确定ESC键被按下

$（这）。父（）Html（tdtext）；

$（这）。父（）Click（tdclick）；

}

}）；

Tdnode.append（输入）；

tdnode.children（输入）。Trigger（选择）；

输入/丢失输入框，方法的实现

Input.blur（function（）{（）

tdnode.html（$（this）。瓦迩（））；

Tdnode.click（tdclick）；

}）；

Tdnode.unbind（点击）；

}





相比之下，个人更像第二类。合伙人的意见是什么欢迎到我这里来。