The code for a row in the existing table is as follows:
<Tr> <td> <span class = "catid"> 2 </span> </td> <td> Company Profile </td> <td> internal topic </td> <td> <span class = "listorder" title = "click to modify"> 2 </span> </td> </tr>
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 = '<input type = "text" value = "' + listorder_now_text + '" size = 2 class = "listorder_input"/> '; $ (this ). parent (). append (list_form); // Insert the input box $ (". listorder_input "). focus (); // customize a div and prompt var loading = '<div id = "loading"> </div> '; $ (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 function click
The content in ajax. 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.