jQuery ajax method to modify content with mouse click

jQuery ajax method to modify content with mouse click_jquery

WBOY

Release： 2016-05-16 16:43:07

Original

1270 people have browsed it

The code for a row in an existing table looks like this:

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

Copy after login

The idea of modifying content with a mouse click is as follows:

1. Click the number in the column sorting column to get the content in the first column of the same row, that is, the column id
2. Hide the numbers in column sorting
3. Insert an input box into the column sorting column, display the content in the column sorting column in the input box, and set it as focus
4. Modify the content in the input, submit the data when the focus is lost, and use ajax to transfer the data to the server. The method is the post method
5. When submitting data, a friendly reminder will appear that it is being modified. . . Or wait for the picture
6. Return the success message and redisplay the modified content. Remove the input box

The jquery core code that implements this function is as follows:

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

Copy after login

The content in ajax.php is simple. It is only used for processing and demonstration, and no data is submitted to the server. The code is as follows:

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

Copy after login