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 相关文章推荐
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
Javascript面向对象编程
Mar 18 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
简单实现js浮动框
Dec 13 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
微信小程序 共用变量值的实现
Jul 12 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 Javascript
js实现删除json中指定的元素
Sep 22 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设计聊天室步步通
2006/10/09 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
Python and、or以及and-or语法总结
2015/04/14 Python
Python本地与全局命名空间用法实例
2015/06/16 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
python写一个随机点名软件的实例
2019/11/28 Python
Python流程控制语句的深入讲解
2020/06/15 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
软件测试常见笔试题
2012/02/04 面试题
初任培训自我鉴定
2013/10/07 职场文书
大学生旅游业创业计划书
2014/01/29 职场文书
八年级美术教学反思
2014/02/02 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript
python引入其他文件夹下的py文件具体方法
2021/05/23 Python