做專案的時候，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>