jQuery kaedah ajax untuk mengubah suai kandungan dengan click_jquery tetikus

Kod untuk baris dalam jadual sedia ada kelihatan seperti ini:

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

Idea untuk mengubah suai kandungan dengan klik tetikus adalah seperti berikut:

1. Klik nombor dalam lajur pengisihan lajur untuk mendapatkan kandungan dalam lajur pertama baris yang sama, iaitu id lajur
2. Sembunyikan nombor dalam pengisihan lajur
3. Masukkan kotak input ke dalam lajur pengisihan lajur, paparkan kandungan dalam pengisihan lajur dalam kotak input dan tetapkannya sebagai fokus
4. Ubah suai kandungan dalam input, serahkan data apabila fokus hilang, dan gunakan ajax untuk memindahkan data ke pelayan Kaedahnya ialah kaedah pos
5. Apabila menyerahkan data, peringatan mesra akan muncul bahawa ia sedang diubah suai. . . Atau tunggu gambar
6. Kembalikan mesej kejayaan dan paparkan semula kandungan yang diubah suai Alih keluar kotak input

Kod teras jquery yang melaksanakan fungsi ini adalah seperti berikut:

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

Kandungan dalam ajax.php adalah mudah Ia hanya digunakan untuk pemprosesan dan demonstrasi, dan tiada data diserahkan kepada pelayan adalah seperti berikut:

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