JQuery实现可直接编辑的表格

一、功能概览

二、实现思路

三、HTML结构

四、JavaScript实现

具体的JavaScript代码如下：

```javascript

$(function(){

$("td").on('click', function(){

var tdObj = $(this);

if(tdObj.children("input").length > 0) return; // 如果单元格已有输入框，则不再响应点击事件

var preText = tdObj.html(); // 获取当前单元格的文本内容

var inputObj = $(""); // 创建一个文本框元素

inputObj.width(tdObj.width()).height(tdObj.height()) // 设置文本框宽高与单元格相同

.css({border:"0px",fontSize:"17px",font:"宋体"})

.val(preText) // 设置文本框的值为当前单元格的文本内容

.focus() // 使文本框获得焦点

.select(); // 全选文本框中的内容

inputObj.on('keyup', function(event){

if(event.which == 13){ // 用户按下回车

tdObj.html($(this).val()); // 将文本框的值设置为单元格的内容

} else if(event.which == 27){ // 用户按下ESC键

tdObj.html(preText); // 恢复单元格的原始内容

}

});

// 进入编辑状态后，不再响应点击事件

inputObj.off('click');

});

});

```

结束标记：`Cambrian.render('body')`（如有特殊需求）。