html jqury行编辑状态,Jquery实现行内编辑

做项目的时候，UI封装了好了一个行内编辑，当时用起来的时候觉得高大上啊，好奇是怎么实现的，现在研究了一下，了解到了，其实行内编辑就是做了点小动作，让用户觉得点击这行的时候就可以对这行的内容进行编辑，点击回车的时候则可以提交所编辑的内容，其实原理很简单，下面给大家介绍下：

首先这个是行内边界的效果图，我们点击其中的一行可对其进行操作，点击Esc键退出操作，点击回车键进行操作。

原理：

其实看似是对这行进行操作，其实是在我们点击这行的时候，给这行插入一个文本框，然后将这行的值赋值给文本框，让用户看似是点击这行对其进行编辑，其实是做了一些小动作，下面我们来介绍下代码：

$(function () {

$("tbody tr:even").css("background-color", "#ECE9D8");

//找到我们需要的单元格

var numId = $("tbody td:even");

给这些单元格注册鼠标点击事件

numId.click(function () {

//创建一个文本框

var inputObj = $("");

//去掉文本框的边框

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

//设置文本框中的文字大小是16px

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

//找到当鼠标点击的td,this对应的就是响应了click的那个td

var tdObj = $(this);

//将文本框的宽度和td的宽度相同

inputObj.width(tdObj.width());

//设置文本框的背景色

inputObj.css("background-color", tdObj.css("background-color"));

//需要将当前td中的内容放到文本框中

inputObj.val(tdObj.html());

//清空td中的内容

tdObj.html("");

//将文本框插入到td中

inputObj.appendTo(tdObj);

});

});

精简后的代码：

numId.click(function () {

var tdObj = $(this);

var text = tdObj.html();

tdObj.html("");

var inputObj = $("").css("border-width", "0")

.css("font-size", "16px").width(tdObj.width())

.css("background-color", tdObj.css("background-color"))

.val(text).appendTo(tdObj);

//是文本框插入之后被选中

inputObj.get(0).select();

inputObj.click(function () {

return false;

});

//处理文本框上回车和esc按键的操作

inputObj.keyup(function (event) {

//获取当前按下键盘的键值

//处理回车的情况

var keycode = event.which

if (keycode == 13) {

var inputtext = $(this).val();

tdObj.html(inputtext);

}

if (keycode == 27) {

tdObj.html(text);

}

});

});

行内编辑就这样成功的实现了。