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 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
让你的网站可编辑的实现js代码
Oct 19 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 Javascript
js通过循环多张图片实现动画效果
Dec 19 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 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 静态页面中显示动态内容
2009/08/14 PHP
php的sso单点登录实现方法
2015/01/08 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
浅谈javascript的数据类型检测
2010/07/10 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
vue源码解析之事件机制原理
2018/04/21 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
Python实现二分查找与bisect模块详解
2017/01/13 Python
答题辅助python代码实现
2018/01/16 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
通过实例学习Python Excel操作
2020/01/06 Python
提高python代码运行效率的一些建议
2020/09/29 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
好的演讲稿开场白
2013/12/30 职场文书
致铅球运动员广播稿精选
2014/01/12 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
年检委托书
2014/08/30 职场文书
酒桌上的开场白
2015/06/01 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
Java无向树分析 实现最小高度树
2022/04/09 Javascript
tree shaking对打包体积优化及作用
2022/07/07 Java/Android