jQuery et ajax réalisent la méthode de modification du contenu par clic de souris

Cet article présente principalement la méthode jQuery+ajax pour implémenter le clic de souris pour modifier le contenu. Les amis qui en ont besoin peuvent se référer à

Une ligne de code dans le tableau existant est la suivante :

<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 le contenu d'un simple clic de souris est la suivante :

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

Le code principal jquery pour implémenter 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 = &#39;<input type="text"  value="&#39;+listorder_now_text+&#39;" size=2 class="listorder_input" />&#39; ;
 $(this).parent().append(list_form); //插入 input框
 $(".listorder_input").focus();
//自定义一个p 提示修改中
 var loading = &#39;<p id="loading"><img src="img/loading.gif" alt="修改中..."/></p>&#39;;
 $(this).parent().append(loading);
 $(&#39;#loading&#39;)
  .css({
   "color" : "red" ,
   "display" : "none"
  })
//定义ajax的全局事件
 $(this).ajaxStart(function(){
  $(&#39;#loading&#39;).show();
 })
 $(this).ajaxStop(function(){
  $(&#39;#loading&#39;).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 function click

Le contenu d'ajax.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'];

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun pour un contenu plus connexe. , veuillez faire attention au site Web PHP chinois !

Recommandations associées :

jquery pour obtenir l'effet de défilement horizontal des images

jQuery et canvas pour réaliser l'horizontal lancer et couleur de la sphère Effet de transformation dynamique

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!