Jquery-based high-performance switching between td and input and modifiable content implementation code

Add the left and right direction keys.

In actual work, we will encounter such a situation. The page displays 100 pieces of data, and the user also wants to change the data. The common method may be as follows,

 

This method may cause a problem, that is, the page is displayed slowly, and if there is a scroll bar, there will be some cards. The following shows a solution for me. The display is all td and there is no input tag, as shown below:

When you click one of the td, the following will appear:

When you click td, a dynamic input is added to td and the td value is assigned to input. When you move the mouse away from input, the input value is assigned to td. At the same time, you can press enter to move up or down.

You can make some extensions and make some practical functions (for editing large volumes of data, etc ). I will not talk about it much. I will attach the source code for your reference only.
Online Demo address http://demo.jb51.net/js/td_input_edit/index.htm
Packaging http://xiazai.jb51.net/201101/yuanma/td_input_edit.rar