Jquery双击实现编辑文本框,ajax传递参数

最新推荐文章于 2024-01-02 19:29:25 发布

原创最新推荐文章于 2024-01-02 19:29:25 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Jquery #ajax

jquery 同时被 2 个专栏收录

6 篇文章

订阅专栏

ajax

3 篇文章

订阅专栏

该博客介绍了如何使用Jquery的ondblclick()函数实现在页面上双击编辑文本框的功能，并通过Ajax传递参数到后台进行数据操作。文中还提供了SpringMVC后台处理数据库的相关说明及XML的SQL语句示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可以下载Demo,包含springMVC的后台如何操作数据库

需要修改的文本框

<td width="260" ondblclick="edit(this,'username')">hello</td>

ondblclick()函数

 <script type="text/javascript">
  //双击实现编辑文本框(attrName为要修改的属性名)
  function edit(obj,attrName){
     var oldHtml = obj.innerHTML;//原单元格里面的值
     var newobj = document.createElement('input');//创建节点
     newobj.name = attrName;
     newobj.type = "text";
     newobj.value = oldHtml;


    obj.innerHTML = '';  
    obj.appendChild(newobj);//把新的值赋到单元格  
    newobj.focus();  //获取焦点

    //给文本框添加失焦事件
    $(newobj).blur (function(){//不能newobj.blur=function(){}
         if(this.value==null || this.value==""){//排除文本框为null时的情况
            obj.innerHTML = oldHtml;//不填值时返回原值
            return false;
        }
        obj.innerHTML = this.value?this.value:oldHtml;//当触发时判断新增元素值是否为空，为空则不修改，返回原有值
        var userId = $("#userId").val();//需要传递的用户id
        //向数据库传值，修改数据库信息
         if(oldHtml != this.value){//值改变时才更新，不是(obj.innerHTML！=this.value),这样的话结果一样
            $.ajax({
                type:"post",
                url:"changeUser.form",
                dataType:"json",
                data:{"attrName":attrName,"newHtml":this.value,"userId":userId},
                error:function(){
                },
                success:function(){

                },
            });

        }  

    })


  }

  </script>

简单描述dao层的sql语句

public void changeUser(@Param("attrName") String attrName,@Param("newHtml") String newHtml,@Param("id") int id);

xml的sql语句
<update id="changeUser"> update t_user set ${attrName}=${newHtml} where id=${id} </update>