jQuery+ajax实现鼠标单击修改内容的思路


Posted in Javascript onJune 29, 2014

现有表格中的一行的代码如下所示:
效果可以看下具体51搜索展示http://www.51bt.cc,结合Xunsearch全文检索技术,可以达到毫秒级的数据搜索

<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 clickajax.php中内容就简单了,这里只做处理做演示用,并没有向服务器提交数据,代码如下:

sleep(1);//延时运行1秒,查看效果用,实际代码中不需要
echo $_POST['listorder'];
Javascript 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
js三种排序算法分享
Aug 16 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
jQuery阻止同类型事件小结
Apr 19 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
通过location.replace禁止浏览器后退防止重复提交
Sep 04 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
html文本框提示效果的示例代码
Jun 28 #Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 #Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 #Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 #Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 #Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 #Javascript
node.js实现逐行读取文件内容的代码
Jun 27 #Javascript
You might like
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
浅析Python多线程下的变量问题
2015/04/28 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
Python pymongo模块用法示例
2018/03/31 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
Python中six模块基础用法
2019/12/08 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
python3下pygame如何实现显示中文
2020/01/11 Python
python 元组的使用方法
2020/06/09 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
python处理写入数据代码讲解
2020/10/22 Python
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
Java设计模式中的命令模式
2022/04/28 Java/Android