Jquery实现行内编辑

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

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

原理：

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

<span style="font-family:KaiTi_GB2312;font-size:18px;">$(function () {    $("tbody tr:even").css("background-color", "#ECE9D8");    //找到我们需要的单元格    var numId = $("tbody td:even");    给这些单元格注册鼠标点击事件        numId.click(function () {            //创建一个文本框            var inputObj = $("<input type='text'>");            //去掉文本框的边框            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);        });    }); </span>

精简后的代码：

<span style="font-family:KaiTi_GB2312;font-size:18px;"> numId.click(function () {        var tdObj = $(this);        var text = tdObj.html();        tdObj.html("");        var inputObj = $("<input type='text'>").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);            }        });    });</span>

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