JQuery实现可编辑的表格

点击表格后可直接编辑，回车或鼠标点击页面其他地方后编辑生效，按Esc可取消编辑

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

//相当于在页面中的 body标签加上onload事件

$(function() {

//找到所有的td节点

var tds = $("td");

//给所有的td添加点击事件

tds.click(function() {

//获得当前点击的对象

var td = $(this);

//取出当前td的文本内容保存起来

var oldText = td.text();

//建立一个文本框，设置文本框的值为保存的值

var input = $("<input type='text' value='" + oldText + "'/>");

//将当前td对象内容设置为input

td.html(input);

//设置文本框的点击事件失效

input.click(function() {

return false;

});

//设置文本框的样式

input.css("border-width", "0");

input.css("font-size", "16px");

input.css("text-align", "center");

//设置文本框宽度等于td的宽度

input.width(td.width());

//当文本框得到焦点时触发全选事件

input.trigger("focus").trigger("select");

//当文本框失去焦点时重新变为文本

input.blur(function() {

var input_blur = $(this);

//保存当前文本框的内容

var newText = input_blur.val();

td.html(newText);

});

//响应键盘事件

input.keyup(function(event) {

// 获取键值

var keyEvent = event || window.event;

var key = keyEvent.keyCode;

//获得当前对象

var input_blur = $(this);

switch (key)

{

case 13://按下回车键，保存当前文本框的内容

var newText = input_blur.val();

td.html(newText);

break;

case 27://按下 esc键，取消修改，把文本框变成文本

td.html(oldText);

break;

}

});

});

});

第二种单击表格可以编辑的方法

$(document).ready(function(){

var tds = $("td");

tds.click(tdClick);

});

function tdClick(){

var tdnode = $(this);

var tdtext = tdnode.text();

tdnode.html("");

var input = $("<input>");

input.val(tdtext); // input.attr("value",tdtext);

input.keyup(function(event){

var myEvent = event || window.event;

var keyCode = myEvent.keyCode;

if(keyCode == 13){

var inputnode = $(this);

var inputtext = inputnode.val();

var td = inputnode.parent();

td.html(inputtext);

td.click(tdClick);

}

if(keyCode == 27){ //判断是否按下ESC键

$(this).parent().html(tdtext);

$(this).parent().click(tdClick);

}

});

tdnode.append(input);

tdnode.children("input").trigger("select");

//输入框失去焦点，所执行的方法

input.blur(function(){

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

tdnode.click(tdClick);

});

tdnode.unbind("click");

}