JQuery实现了可直接编辑的表

本文通过一个例子说明JQuery可以直接实现可编辑的表。分享给大家参考。具体分析如下：

功能：

创建表格，用户点击单元格后，可以直接修改单元格文本。在编辑状态下，用户可以按回车键确认修改，按ESC键取消修改。

效果如下：

思考：

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

HTML代码：

Table align='center' tr td学号/TD TD TD学名/TD/tr tr TD 001/TD TD TD dog/TD/tr tr TD 002/TD TD TD TD cat/TD/tr TD 003/TD TD TD TD TD TD猪/TD/tr/table JavaScript代码3360

$ (function () {$ ('TD '))。click (function (event) {//TD已经有输入，所以如果($ (this)就不需要响应click事件了。子代(' input ')。length0)返回falsevar tdObj=$(this)；var TotaL=TDobj . html()；//获取当前文本内容var input obj=$(' input type=' text '/')；//创建文本框元素tdObj.html(“”)；//清除td input tobj . width(TD obj . width())中的所有元素//将文本框的宽度设置为与TD相同。高度(tdobj.height())。CSS ({border3360' 0px '，fontsize:' 17px '，font : '' })。瓦尔(借口)。追加到(TDobj)//将创建的文本框插入最后一个。tdobj子节点//的触发器(“焦点”)使用trigger方法来触发事件。触发器(' select ')；Inputobj。keyup(函数(事件){if (13==事件。哪个)//用户按enter {var text=$(this)。val()；tdObj.html(文本)；} else if(27==event . what)//ESC键{ TDobj . html(TotaL)；} });//进入编辑状态后，点击事件inputobj。单击(function(){ return false；});});});希望本文对大家的jQuery程序设计有所帮助。