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 相关文章推荐
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 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 curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
python操作mysql代码总结
2018/06/01 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
python实现共轭梯度法
2019/07/03 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
python中可以声明变量类型吗
2020/06/18 Python
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
浙大毕业生自荐信
2014/01/26 职场文书
2014全国两会大学生学习心得体会
2014/03/10 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
2014年物流工作总结
2014/11/25 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
在校生证明
2015/06/17 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
python flappy bird小游戏分步实现流程
2022/02/15 Python
python 镜像环境搭建总结
2022/09/23 Python