jQuery-Ajax-Methode zum Ändern von Inhalten mit Mausklick_jquery

Der Code für eine Zeile in einer vorhandenen Tabelle sieht folgendermaßen aus:

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

Die Idee, Inhalte per Mausklick zu ändern, ist wie folgt:

1. Klicken Sie auf die Zahl in der Spaltensortierungsspalte, um den Inhalt in der ersten Spalte derselben Zeile abzurufen, d. h. die Spalten-ID
2. Verstecken Sie die Zahlen in der Spaltensortierung
3. Fügen Sie ein Eingabefeld in die Spaltensortierungsspalte ein, zeigen Sie den Inhalt in der Spaltensortierung im Eingabefeld an und setzen Sie ihn als Fokus
4. Ändern Sie den Inhalt der Eingabe, senden Sie die Daten, wenn der Fokus verloren geht, und übertragen Sie die Daten mit Ajax an den Server. Die Methode ist die Post-Methode
5. Beim Absenden der Daten erscheint eine freundliche Erinnerung, dass die Daten geändert werden. . . Oder warte auf das Bild
6. Geben Sie die Erfolgsmeldung zurück und zeigen Sie den geänderten Inhalt erneut an. Entfernen Sie das Eingabefeld

Der JQuery-Kerncode, der diese Funktion implementiert, lautet wie folgt:

$('.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 function click

Der Inhalt in ajax.php ist einfach. Er dient nur der Verarbeitung und Demonstration und es werden keine Daten an den Server übermittelt. Der Code lautet wie folgt:

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