How to Use jQuery + ajax to modify content by clicking the mouse _ jquery-js tutorial

This article mainly introduces the idea and core code for jQuery + ajax to implement the content modification by clicking the mouse. If you need it, you can refer to the code of a row in the existing table as follows:
Effect can see the specific 51 search display http://www.51bt.cc, combined with Xunsearch full-text retrieval technology, can achieve millisecond-level data search

2Company ProfileInternal topic2

The following figure shows how to modify the content by clicking the mouse:

1. Click the number in the column sorting column to obtain the content in the first column of the same row, that is, the column id.
2. Hide numbers in column sorting
3. Insert the input box in the column sorting column, display the content in the column sorting in the input box, and set it to focus
4. modify the content in the input file, submit data when the focus is lost, and use ajax to pass the data method to the server as the post method.
5. When submitting data, a friendly prompt is displayed for modification... Or wait for the image
6. Return the successful message and re-display the modified content. Remove the input box.

The core code of jquery to implement this function is as follows:

$ ('. Listorder '). click (function (e) {var catid = $ (this ). parent (). siblings ("td: eq (0 )"). text (); // obtain the id value var listorder_now_text = $ (this) in the first column of the same row ). text (); // get the content in listorder and save it first $ (this ). text (""); // set the content to empty var list_form =''; $ (This ). parent (). append (list_form); // Insert the input box $ (". listorder_input "). focus (); // customize a p prompt to modify var loading ='
'{}(This}.parent().append(loading{}('{loading'}.css ({"color": "red", "display": "none"}) // defines the global events of ajax $ (this ). ajaxStart (function () {$ ('# loading '). show () ;}) $ (this ). ajaxStop (function () {$ ('# loading '). remove () ;}) $ (". listorder_input "). blur (function () {var thislist = $ (this ). siblings (); // obtain the listorder $. post ("ajax. php ", {action:" mod_listorder ", catid: catid, listorder: $ (this ). attr ("value")}, function (data, textStatus) {$ (thislist ). text (data) ;}); // end. post $ (this ). remove () ;}) // end function blur}) // end

The content in function clickajax. php is simple. Here we only use it for demonstration and do not submit data to the server. The Code is as follows:

Sleep (1); // The latency is 1 second. It is used to view the effect. echo $ _ POST ['storder'] is not required in the actual code.