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中的end()使用方法
Jul 10 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
微信小程序实现预览图片功能
Oct 22 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
微信小程序实现文件、图片上传功能
Aug 18 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
用文本作数据处理
2006/10/09 PHP
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
php中memcache 基本操作实例
2015/05/17 PHP
帝国cms常用标签汇总
2015/07/06 PHP
PHP常用的三种设计模式
2017/02/17 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
基于django传递数据到后端的例子
2019/08/16 Python
python实现银行管理系统
2019/10/25 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
python 实现简易的记事本
2020/11/30 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
采购部主管岗位职责
2014/01/01 职场文书
商务英语广告词大全
2014/03/18 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL