jQuery ajax idée d'implémenter un clic de souris pour modifier content_jquery

Le code d'une ligne dans un tableau existant ressemble à ceci :
L'effet peut être vu dans l'affichage de recherche spécifique 51 http://www.51bt.cc En combinaison avec la technologie de récupération de texte intégral Xunsearch, une recherche de données au niveau de la milliseconde peut être réalisée

.

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

L'idée de modifier un contenu d'un simple clic de souris est la suivante :

1. Cliquez sur le numéro dans la colonne de tri des colonnes pour obtenir le contenu de la première colonne de la même ligne, c'est-à-dire l'identifiant de la colonne
2. Masquer les nombres dans le tri des colonnes
3. Insérez une zone de saisie dans la colonne de tri des colonnes, affichez le contenu dans le tri des colonnes dans la zone de saisie et définissez-le comme focus
4. Modifiez le contenu de l'entrée, soumettez les données lorsque le focus est perdu et utilisez ajax pour transférer les données vers le serveur. La méthode est la méthode post
. 5. Lors de la soumission des données, un rappel amical apparaîtra indiquant qu'elles sont en cours de modification. . . Ou attendez la photo
6. Renvoyez le message de réussite et réaffichez le contenu modifié. Supprimez la zone de saisie

.

Le code principal de jquery qui implémente cette fonction est le suivant :

$('.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="img/loading.gif" 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

Le contenu de la fonction clickajax.php est simple. Il n'est utilisé que pour le traitement et la démonstration, et aucune donnée n'est soumise au serveur :

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