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 相关文章推荐
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
vue 实现input表单元素的disabled示例
Oct 28 Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 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+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
php中函数的形参与实参的问题说明
2010/09/01 PHP
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
PHP中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
python实现简易云音乐播放器
2018/01/04 Python
Python高斯消除矩阵
2019/01/02 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
序列化Python对象的方法
2020/08/01 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
初中生学习生活的自我评价
2013/11/20 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python