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 相关文章推荐
Javascript document.referrer判断访客来源网址
May 15 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
Vue自定义指令写法与个人理解
Feb 09 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
Vue实现商品详情页的评价列表功能
Sep 04 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 Javascript
token 机制和实现方式
Dec 15 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
一个php作的文本留言本的例子(一)
2006/10/09 PHP
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
Python中Class类用法实例分析
2015/11/12 Python
Python 性能优化技巧总结
2016/11/01 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
Python列表推导式实现代码实例
2020/09/09 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
2015年元旦主持词开场白
2014/12/14 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
公司员工辞职信范文
2015/05/12 职场文书