当前位置: 首页 > 编程笔记 >

jQuery+ajax实现鼠标单击修改内容的方法

计向晨
2023-03-14
本文向大家介绍jQuery+ajax实现鼠标单击修改内容的方法,包括了jQuery+ajax实现鼠标单击修改内容的方法的使用技巧和注意事项,需要的朋友参考一下

现有表格中的一行的代码如下所示: 

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

要实现鼠标单击修改内容思路如下:
 
1、点击栏目排序栏目中的数字,获取同一行的第一列中的内容,即栏目id
2、隐藏栏目排序中的数字
3、在栏目排序列中插入input框,并在input框中显示栏目排序中的内容,并设置为焦点
4、修改input中的内容,失去焦点的时候提交数据,用ajax向服务器传递数据 方法为post方法
5、提交数据的时候,友好提示修改中。。。 或者等待图片
6、返回成功信息 ,重新显示修改后的内容 去掉input框

实现这一功能的jquery核心代码如下:

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

ajax.php中内容就简单了,这里只做处理做演示用,并没有向服务器提交数据,代码如下:

sleep(1);//延时运行1秒,查看效果用,实际代码中不需要
echo $_POST['listorder'];
 类似资料:
  • 本文向大家介绍jQuery实现鼠标划过修改样式的方法,包括了jQuery实现鼠标划过修改样式的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现鼠标划过修改样式的方法。分享给大家供大家参考。具体如下: 希望本文所述对大家的jQuery程序设计有所帮助。

  • 本文向大家介绍jquery ajax双击div可直接修改div中的内容,包括了jquery ajax双击div可直接修改div中的内容的使用技巧和注意事项,需要的朋友参考一下 最近在做后台功能开发的时候,用到对排序字段的修改,感觉只为了修改一个排序值,而要重新进入编辑页比较麻烦,于是网上找点资料自己动手写了一个jquery双击实现直接修改排序值的效果: html代码: JS代码: PHP代码: 效

  • 本文向大家介绍jQuery实现单击和鼠标感应事件,包括了jQuery实现单击和鼠标感应事件的使用技巧和注意事项,需要的朋友参考一下 1.实现单击事件动态交替 之前我们讲到了toggleClass(),对于单击事件而言,jQuery同样提供了动态交替的toggle()方法,这个方法接受两个参数,两个参数均为监听函数,在click事件中交替使用。 例子:点击事件的动态交互。 2.实现鼠标感应 在css

  • 本文向大家介绍js实现鼠标点击文本框自动选中内容的方法,包括了js实现鼠标点击文本框自动选中内容的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现鼠标点击文本框自动选中内容的方法。分享给大家供大家参考。具体如下: 这里使用JS实现鼠标点击时自动选中文本框文本的效果,相信许多朋友都遇到这种功能的,就是当我们点击文本框的时候,文本框中默认的文字会被全部选中,这样当你输入的时候不用再

  • 本文向大家介绍Python实现修改文件内容的方法分析,包括了Python实现修改文件内容的方法分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Python实现修改文件内容的方法。分享给大家供大家参考,具体如下: 1 替换文件中的一行 1.1 修改原文件 ① 要把文件中的一行Server=192.168.22.22中的IP地址替换掉,因此把整行替换。 ② 把原文件的hello替换成wor

  • 问题内容: 我在用 单击到容器上的按钮,但随后进行了ajax调用,并且内容使用新内容进行了更新,然后当我尝试单击它时将无法工作…单击该按钮时,将不会返回任何内容。 我什至试过 要么 我该如何运作? 编辑: 我的HTML: 问题答案: 应该以这种方式完成。 如果您的容器在ajax请求期间没有更改,则性能更高: 始终将委托事件绑定到将包含动态元素的最接近的静态元素。