High-performance TD and input switching based on jquery and modifying content to implement code _javascript skills

On the basis of the previous, add the direction key around support.

In practical work, we will encounter such a situation. There are 100 of data displayed on the page, and the user also wants him to change the data in it, the normal way may be as follows,

One problem with this approach is that the page is a bit slow when it is displayed, and there are some cards if there is a scroll bar. The following gives me a solution, show the time is all TD, no input tags, as follows

When you click on one of the TD, the following will appear

When you click TD, will be in the TD dynamic add an input at the same time the TD value to the input, when you leave the input of the mouse, the input value will be assigned to TD. At the same time support carriage return, up and down direction keys, to the right, move up and down.

This can be extended to make some very practical features (for mass data editing, and so on). Not much said, attached source code, only for reference.
Online Demo Address http://demo.jb51.net/js/td_input_edit/index.htm
Package Download Address Http://xiazai.jb51.net/201101/yuanma/td_input_edit.rar