jQuery ajax idea of ​​​​implementing mouse click to modify content_jquery

The code for a row in an existing table looks like this:
The effect can be seen in the specific 51 search display http://www.51bt.cc. Combined with Xunsearch full-text retrieval technology, millisecond-level data search can be achieved

<tr>
<td><span class="catid">2</span></td>
<td>公司介绍</td>
<td>内部栏目</td>
<td><span class="listorder" title="点击修改">2</span></td>
</tr>

The idea of ​​modifying content with a mouse click is as follows:

1. Click the number in the column sorting 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 an input box into the column sorting column, display the content in the column sorting column in the input box, and set it as focus
4. Modify the content in the input, submit the data when the focus is lost, and use ajax to transfer the data to the server. The method is the post method
5. When submitting data, a friendly reminder will appear that it is being modified. . . Or wait for the picture
6. Return the success message and redisplay the modified content. Remove the input box

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

$('.listorder').click(function(e){
var catid = $(this).parent().siblings("td:eq(0)").text();//获取同一行上 第一列中的id值
var listorder_now_text = $(this).text();//获取listorder中的内容 先保存起来
$(this).text("");//设置内容为空
var list_form = '<input type="text" value="'+listorder_now_text+'" size=2 class="listorder_input" />' ;
$(this).parent().append(list_form); //插入 input框
$(".listorder_input").focus();
//自定义一个div 提示修改中
var loading = '<div id="loading"><img src="/static/imghwm/default1.png"  data-src="img/loading.gif"  class="lazy" alt="修改中..."/></div>';
$(this).parent().append(loading);
$('#loading')
.css({
"color" : "red" ,
"display" : "none"
})
//定义ajax的全局事件
$(this).ajaxStart(function(){
$('#loading').show();
})
$(this).ajaxStop(function(){
$('#loading').remove();
})
$(".listorder_input").blur(function(){
var thislist = $(this).siblings(); //取得同级的标签 即 修改后需要显示的 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. It is only used for processing and demonstration, and no data is submitted to the server. The code is as follows:

sleep(1);//延时运行1秒,查看效果用，实际代码中不需要
echo $_POST['listorder'];