The same table? Different tables (editable state table)_jquery
WBOYOriginal
2016-05-16 17:49:561168browse
A new day has begun, and life continues. What I want to share with you today is a different table. An ordinary table is used to display data. The table I want to share today can not only display data, but also edit data. When the mouse clicks on the data, the corresponding data grid becomes editable. Without further ado, let’s get into today’s topic. First complete the HTML page:
There are only a few editable page elements in the HTML page. Unfortunately, table is not one of them. In order to make the table editable, you need to add table Insert editable page elements into it, and then decorate it with CSS to make it look like an ordinary table, but with editable functions. This is what JS wants to accomplish. The JS code is as follows:
Next, let’s do a simple analysis of this JS. The global variable var content is used to save the content in the table before editing. Sometimes the user edits the table but does not want to save the edited result, so he needs to save the table. The contents in are restored to before editing, so when the mouse is clicked, the contents of the table must be saved first.
The following two sentences $("#content tr:odd").css("background-color","#D2B48C"); $("#content tr:even").css("background -color","#C0C0C0"); is to make the table have alternate row colors, just to increase the visibility of the table. var inputObj = $(""); This sentence generates an editable JQuery object, which is to insert editable elements in the table. The following .css() methods It is to add CSS style to the inputObj object. The .css() method can not only set the CSS style for an object but also obtain the CSS style of an object. JQuery provides many such methods. Many times the JQuery object is returned after the JQuery method is executed, so inputObj.css().css().css().... appears. The
appendTo() method realizes the editability of the table (appendix() can also be used) and inserts editable elements into the table. The two methods .get(0).select() are used to select the content in inputObj so that the focus falls on the editable element. It should be noted that these two methods must be written after appendTo(), inputObj.click( The function(){}) method is also essential. Deleting this method will cause an interesting bug. You can give it a try.
The following keyup(function(event){}) can be used to obtain the key value corresponding to the key pressed on the keyboard through event.which. Commonly used key values include Enter key: 13, Esc key :27. When the user presses the Enter key, the edited content is saved and the table is restored to a normal table. When the user presses the Esc key, the contents of the table are restored and the table is restored to a normal table.
User experience, the emergence of Apple has made this word more popular, and we are here to join in the fun. In order to improve the user experience, the blur(function(){}) method is added here. When the focus leaves the editable element, first determine whether the content in the table has been changed. If there is no change, directly restore the table and the contents in the table. If there is a change, Prompts the user whether to save.
Today’s example is basically completed. If you reference the JS code in a separate JS file, a Chinese garbled bug may appear. You might as well give it a try. Thank you for your patience in reading this article, I hope it will be helpful to you.
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