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

作者:whsnow 时间:2024-04-09 19:48:33 

现有表格中的一行的代码如下所示:
效果可以看下具体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'];
标签:ajax,鼠标单击
0
投稿

猜你喜欢

  • 用python下载百度文库的代码

    2023-07-31 00:40:44
  • 教你如何升级SQL Server数据库系统

    2009-01-19 14:42:00
  • PHP登录环节防止sql注入的方法浅析

    2023-07-21 06:41:01
  • Golang实现请求限流的几种办法(小结)

    2024-05-05 09:32:09
  • Mysql全局ID生成方法

    2023-07-02 13:59:53
  • Python执行Linux系统命令的4种方法

    2023-08-10 19:04:50
  • SQL Server如何通过SQL语句直接操作另一台服务器上的SQL SERVER的数据

    2024-01-29 07:55:30
  • Python实现爬取亚马逊数据并打印出Excel文件操作示例

    2021-09-10 05:10:36
  • Vue3中简单使用Mock.js方法实例分析

    2024-04-28 09:28:05
  • CSS网页布局避免滥用DIV元素

    2011-03-30 12:34:00
  • mysql常用命令行操作语句

    2024-01-12 23:51:20
  • php实现在服务器端调整图片大小的方法

    2024-05-13 09:25:46
  • PHP实现将MySQL重复ID二维数组重组为三维数组的方法

    2023-11-18 03:28:57
  • 带农历及节日的js日历源码

    2010-08-01 17:38:00
  • vue实现简单全选和反选功能

    2024-05-09 09:29:47
  • pandas删除部分数据后重新生成索引的实现

    2023-11-18 04:44:13
  • SQL server 表数据改变触发发送邮件的方法

    2024-01-23 02:15:48
  • python相对包导入报“Attempted relative import in non-package”错误问题解决

    2022-02-28 12:57:05
  • python使用wxpython开发简单记事本的方法

    2022-05-15 18:06:12
  • Python之两种模式的生产者消费者模型详解

    2021-07-31 17:44:02
  • asp之家 网络编程 m.aspxhome.com