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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
vue 获取url里参数的两种方法小结
Nov 12 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
写一个用户在线显示的程序
2006/10/09 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
php木马webshell扫描器代码
2012/01/25 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
bootstrap改变按钮加载状态
2014/12/01 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
原生js实现自定义滚动条组件
2021/01/20 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
python学生管理系统开发
2019/01/30 Python
Django中的用户身份验证示例详解
2019/08/07 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
关于python中的xpath解析定位
2020/03/06 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
公司道歉信范文
2014/01/09 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
学习之星事迹材料
2014/05/17 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers