Jquery實現行內編輯
阿新 • • 發佈:2019-02-13
做專案的時候,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>
行內編輯就這樣成功的實現了。