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 相关文章推荐
JavaScript 参考教程
Dec 29 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
JQuery对checkbox操作 (循环获取)
May 20 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
JS数组方法some、every和find的使用详情
Oct 05 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
php实现简易计算器
2020/08/28 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
python中的五种异常处理机制介绍
2014/09/02 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
python使用super()出现错误解决办法
2017/08/14 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
幸福家庭事迹材料
2014/02/03 职场文书
狼和鹿教学反思
2014/02/05 职场文书
党员民主评议总结
2014/10/20 职场文书
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python