jQuery and ajax realize the method of modifying content with mouse click-JS Tutorial-php.cn

jQuery and ajax realize the method of modifying content with mouse click

不言

Release： 2018-07-02 16:10:38

Original

1909 people have browsed it

This article mainly introduces the method of jQuery ajax to implement mouse click to modify content. Friends who need it can refer to

The code of a row in the existing table is as follows:

<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 to modify the content with a mouse click is as follows:

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

The jquery core code to implement this function is as follows:

$(&#39;.listorder&#39;).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

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[&#39;listorder&#39;];

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

jquery realizes the effect of horizontal scrolling of pictures

jQuery and canvas realize the flat throwing and color of the sphere Dynamic transformation effect

The above is the detailed content of jQuery and ajax realize the method of modifying content with mouse click. For more information, please follow other related articles on the PHP Chinese website!