jQuery und Ajax realisieren die Methode zum Ändern von Inhalten per Mausklick

In diesem Artikel wird hauptsächlich die Methode von jQuery + Ajax zum Implementieren von Mausklicks zum Ändern von Inhalten vorgestellt. Freunde, die dies benötigen, können darauf verweisen

Eine Codezeile in der vorhandenen Tabelle lautet wie folgt:

<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 Spalte Sortierspalte Holen Sie sich die erste Spalte derselben Zeile. Den Inhalt in der Spalten-ID
2. Verstecken Sie die Zahl in der Spaltensortierung
3. Fügen Sie ein Eingabefeld in die Spaltensortierungsspalte ein und zeigen Sie den Inhalt in der Spaltensortierung an Eingabefeld und legen Sie es als Fokus fest
4. Ändern Sie den Inhalt in der Eingabe, senden Sie die Daten, wenn der Fokus verloren geht, und verwenden Sie Ajax, um die Daten mithilfe der Post-Methode an den Server zu übertragen
5. Beim Senden Nachdem Sie die Daten eingegeben haben, erscheint eine freundliche Erinnerung, dass die Änderung durchgeführt wird. . . Oder warten Sie auf das Bild
6. Geben Sie die Erfolgsmeldung zurück, zeigen Sie den geänderten Inhalt erneut an und entfernen Sie das Eingabefeld

Der JQuery-Kerncode zum Implementieren dieser Funktion 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 = &#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

Der Inhalt in ajax.php ist einfach und wird nur zur Verarbeitung und Demonstration verwendet. Der Code lautet wie folgt:

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist zur chinesischen PHP-Website!

Verwandte Empfehlungen:

jQuery, um den Effekt des horizontalen Scrollens von Bildern zu erzielen

jQuery und Canvas, um den horizontalen Bildlauf zu realisieren Werfen und Farbe der Kugel Dynamischer Transformationseffekt

Das obige ist der detaillierte Inhalt vonjQuery und Ajax realisieren die Methode zum Ändern von Inhalten per Mausklick. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!