Jquery+ajax to implement the mouse click Modify Content Method _jquery

The code for a row in an existing table looks like this:

<tr>
 <td><span class= "catid" >2</span></td>
 <td> Company Introduction </td>
 <td> internal column </td>
 <td><span class= "Listorder" title= "click Modify" >2</span></td>
</tr>

To implement the mouse click to modify the contents of the following ideas:

1, click the column sort column in the number, get the same row of the contents of the first column, that is, column ID
2, hidden column sorting in the number
3. Insert the input box in the column sequence, and display the contents of column sort in the input box, and set the focus
4, modify the contents of input, lose focus when submitting data, using AJAX to the server to pass data method for POST method
5. When submitting the data, the friendly prompt changes ... Or wait for the picture
6, return the success of the information, to display the modified content to remove the input box

The jquery core code that implements this functionality is as follows:

$ ('. Listorder '). Click (function (e) {var catid = $ (this). Parent (). Siblings ("Td:eq (0)"). Text ()://Get ID value var in the first column on the same line Listorder_now_text = $ (this). Text ()//get content in Listorder Save $ (this). Text ("");/set 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 hint modify var loading = ' <div id= ' loading ' ></div>";
 $ (this). Parent (). append (loading); $ (' #loading '). css ({"Color": "Red", "display": "None"})//define AJAX Global event $ (this). Ajaxstart (function () {$ (' #
 Loading '). Show ();
 $ (this). Ajaxstop (function () {$ (' #loading '). Remove (); }) $ (". Listorder_input"). blur (function () {var thislist = $ (this). Siblings ()///Get the label of the sibling that you want to display after the change Listorder $.post ("a Jax.php ", {action:" Mod_listorder ", Catid:catid, Listorder: $ (this). attr (" value ")}, function (data, Textstat us{$ (thislist). text (data);
 //end. Post $ (this). Remove (); })///end function Blur})//End Function Click

ajax.php content is simple, here only to do the demo, and did not submit data to the server, the code is as follows:

Sleep (1),//delay run 1 seconds, viewing effect, the actual code does not need
echo $_post[' Listorder '];