jQuery实现了一个可以直接编辑的表。

本文演示了可以由jQuery实现直接编辑的表：

功能：

创建一个表，用户单击一个单元格后，单元格文本可以直接修改。

在编辑状态下，用户可以根据返回键确认更改，并根据ESC键撤消修改。

效果如下：

思想:

当用户单击某个单元格时，立即将一个文本框插入该单元格，其宽度和高度设置为单元格的值。当用户确认输入时，它清除单元格中的所有HTML代码，然后将内容设置为用户刚刚输入的文本。

HTML代码：

不.
全名

001
狗

002
猫

003
猪

Javaｓｃｒｉｐｔ代码：

$（函数（）{（））
$（）。Click（函数（事件）{）
已经有了输入，而不需要响应点击事件。
如果（$（这个））子（），长度> 0）
返回false；
tdobj = $（this）功；
VaR的借口= tdobj.html（）；
获取当前文本
无功inputobj = $（）；
创建一个文本框元素
（tdobj .html）； / /空TD的所有元素
inputobj
宽度（tdobj.width（））。
设置具有相同宽度的文本框
高度（tdobj.height（））。
CSS（{边界：0px
瓦尔（借口）
appendto（tdobj）。
/ /创建文本框插入的最后一个子节点tdobj
触发器（焦点）
用触发器触发事件的方法
触发器（）；
InputObj.keyup（功能（事件）{）
如果（event.which = 13）
用户可以按回车键。
{
瓦迩（）；
TdObj.html（文本）；
}
如果（event.which = 27）
键
{
TdObj.html (preText);
}
}）；
输入编辑模式，不再处理单击事件。
InputObj.click（function（）{（）
返回false；
}）；
}）；
}）；

希望本文能对大家的jQuery程序设计有所帮助。