JQuery +ajax to achieve a mouse click to modify the content

The code for a line in the existing table looks like this:  

<tr>
 <td><span class="catid">2</span></td>
 <td> Company introduction </td>
 <td> Internal columns </td>
 <td><span class="listorder" title=" Click on the modify ">2</span></td>
</tr>

To achieve the mouse click to modify the content of the idea as follows:
 
1. Click the number in the column to get the content in the first column of the same row, that is, the column id
2. Hide the Numbers in column sorting
3. Insert the input box into the column arrangement, and display the contents in the column arrangement in the input box, and set it as the focus
4. Modify the content in the input, submit the data when the focus is lost, and use ajax to pass the data to the server as the post method
5. When submitting data, kindly prompt for modification... Or wait for pictures
6. Return the success message and remove the input box from the modified content

The core jquery code for this is as follows:

$('.listorder').click(function(e){
 var catid = $(this).parent().siblings("td:eq(0)").text();//Gets the id value in the first column on the same row
 var listorder_now_text = $(this).text();//Get the contents of the listorder and save them
 $(this).text("");//Set the content to null
 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 prompt in the modification
 var loading = '<div id="loading"><img src="img/loading.gif" alt=" Changes in the ..."/></div>';
 $(this).parent().append(loading);
 $('#loading')
  .css({
   "color" : "red" ,
   "display" : "none"
  })
//Define global events for ajax
 $(this).ajaxStart(function(){
  $('#loading').show();
 })
 $(this).ajaxStop(function(){
  $('#loading').remove();
 })
 $(".listorder_input").blur(function(){
  var thislist = $(this).siblings(); //Gets the label of the same level as the listorder that needs to be displayed after modification
  $.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

Content in ajax.php is simple, here only do processing for demonstration purposes, and did not submit data to the server, the code is as follows:

sleep(1);//Delay to run 1 second, to see the effect, the actual code does not need
echo $_POST['listorder'];