JQuery +ajax to achieve the mouse click to modify the content of the idea

The code for a line in the existing table is as follows:
Effect can see the specific 51 search display http://www.51bt.cc, combined with Xunsearch full-text search technology, can reach the millisecond level of data search

<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 clickajax. PHP content 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'];