jQuery+ajax实现鼠标单击修改内容的方法

现有表格中的一行的代码如下所示:

<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 click

ajax.php中内容就简单了,这里只做处理做演示用,并没有向服务器提交数据,代码如下:

sleep(1);//延时运行1秒,查看效果用,实际代码中不需要
echo $_POST['listorder'];
(0)

相关推荐

  • Ajax修改购物车示例

    1.购物车类的设计 ShoppingCartItem:书的封装,包括书名,数量,价格三个属性,以及对应的getter和setter方法. ShoppingCart:购物车封装类,items为 Map<String, ShoppingCartItem> ,以及加入购物车,得到购物车中书的总数量以及总价格三个函数. 2:jsp加入购物车,超链接中带入书名以及价格 <body> <!-- 加入span的目的是为了定位 --> <div id="cartstat

  • jquery ajax修改全局变量示例代码

    今天工作的时候遇到一个问题 代码如下: 复制代码 代码如下: var status=1; var ob=$("[name='email']"); $.ajax({ url:"{:U('Home/Index/checkemail')}", data:"email="+query.email, type:"post", dataType:"json", success:function(re){ status=

  • jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法

    query formValidator插件非常好用,但是有一个严重的Bug,在使用ajax验证的时候,如果输入框的内容已经存在,把鼠标放到输入框,不做任何修改再离开,则会提示错误, 这是这个插件犯的一个很愚蠢的错误 复制代码 代码如下: oneIsValid: function(id, index) { var returnObj = new Object(); returnObj.id = id; returnObj.ajax = -1; returnObj.errormsg = ""

  • ajax实现修改功能

    这段时间在做项目,发现自己忘得好快呀,幸亏有博客园帮我记着呢,整理博客园简直不要太重要了哦 因为做的是一个内部管理系统,只用了一个主页面,所有的都不允许整个网页刷新,所以我们只能用ajax 来做,当然刚开始做也走了很多的弯路,最终还是做出来了 这点还是比较欣慰的 今天要整理一下ajax实现修改功能 这里的login登录也不写了,主要是写一下修改的大体代码,方便以后 用的时候查找 样式我用的是bootstrap,一开始要引入三个文件,这里就不多说了,下面是页面所要显示的样式 <div class=

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

    现有表格中的一行的代码如下所示: 效果可以看下具体51搜索展示http://www.51bt.cc,结合Xunsearch全文检索技术,可以达到毫秒级的数据搜索 <tr> <td><span class="catid">2</span></td> <td>公司介绍</td> <td>内部栏目</td> <td><span class="listorde

  • Ajax修改数据即时显示篇实现代码

    我们这次要请求的服务端网页是:Edit_Data.Asp 待会我会在本次ajax教程中提供该asp文件的源码. 其实在你学会了怎么使用ajax添加数据时,想实现修改数据对你来说已经很容易了!费话不说先看前端的JavaScript代码和本次的ajax实例效果! 复制代码 代码如下: <html> <head> <title>ajax修改数据</title> <style> body{ font-size:12px; } </style>

  • AJAX 自学练习 无刷新提交并修改数据库数据并显示

    request.jsp页面中有rocarsId,和ccrn两个text. 对应在数据库中表格 rocars表的msg_id,ccrn两个字段.现在要实现在界面上修改ccrn的值,ajax提交到response.jsp页面,并调用RocarsEntiy.updateCcrn方法更新对应的ccrn,最后无刷新显示 代码: request.jsp 复制代码 代码如下: <%@ page language="java" contentType="text/html; chars

  • php通过ajax实现双击table修改内容

    复制代码 代码如下: <script type="text/javascript"> $(function() { $("td").dblclick(function() { //获取标签 var td = $(this); var itemid=td[0].id; var txt = td.text(); var input = $("<input type='text' value='" + txt + "'/&g

  • 用Jquery实现可编辑表格并用AJAX提交到服务器修改数据

    下面是js Code: 复制代码 代码如下: $(function() { // 相当于在页面中的body标签加上onload事件 $(".caname").click(function() { // 给页面中有caname类的标签加上click函数 var objTD = $(this); var oldText = $.trim(objTD.text()); // 保存老的类别名称 var input = $("<input type='text' value='&

  • jquery ajax双击div可直接修改div中的内容

    最近在做后台功能开发的时候,用到对排序字段的修改,感觉只为了修改一个排序值,而要重新进入编辑页比较麻烦,于是网上找点资料自己动手写了一个jquery双击实现直接修改排序值的效果: html代码: <div title="[双击可直接修改]" class="changeSort" id="{$id}">{$sort}</div> JS代码: <script type="text/javascript"

随机推荐