Home  >  Article  >  Web Front-end  >  High-performance td and input switching based on jquery and content modification code_javascript skills

High-performance td and input switching based on jquery and content modification code_javascript skills

WBOY
WBOYOriginal
2016-05-16 18:12:131148browse

Based on the previous one, add left and right support for the direction keys.

In actual work, we will encounter such a situation. There are 100 data displayed on the page, and the user also hopes that he can change the data. The common method may be as follows,

A problem with this method is that the page is a bit slow to display, and if there are scroll bars, there will be some lag. Here is one of my solutions. When displayed, it is all TD and there is no input tag, as follows

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

When you click td, an input will be dynamically added to td and the value of td will be assigned to input. When your mouse leaves the input, the value of input will be assigned to td. It also supports Enter and up and down arrow keys to move right, up and down.

You can make some extensions to this and make some very practical functions (editing large batches of data, etc.). Not much to say, the source code is attached for reference only.
Online demo addresshttp://demo.jb51.net/js/td_input_edit/index.htm
Package download addresshttp://xiazai.jb51.net/201101/ yuanma/td_input_edit.rar

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn