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


Posted in Javascript onJune 27, 2014

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

<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'];
Javascript 相关文章推荐
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
vuex存储token示例
Nov 11 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 #Javascript
javascript实现的HashMap类代码
Jun 27 #Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 #Javascript
Javascript字符串对象的常用方法简明版
Jun 26 #Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 #Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 #Javascript
JS的事件绑定深入认识
Jun 26 #Javascript
You might like
安装APACHE
2007/01/15 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
13个PHP函数超实用
2015/10/21 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
vue router2.0二级路由的简单使用
2017/07/05 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
Python中处理unchecked未捕获异常实例
2015/01/17 Python
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
python django事务transaction源码分析详解
2017/03/17 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
python web框架 django wsgi原理解析
2019/08/20 Python
Python tkinter模版代码实例
2020/02/05 Python
python函数定义和调用过程详解
2020/02/09 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
求职信模版
2013/11/30 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
花田少年史观后感
2015/06/16 职场文书
三好学生竞选稿
2015/11/21 职场文书
Python的三个重要函数详解
2022/01/18 Python
Python数据处理的三个实用技巧分享
2022/04/01 Python