牛骨文教育服务平台(让学习变的简单)
博文笔记

jQuery即点即改

创建时间:2016-10-12 投稿人: 浏览次数:1216

1、给你需要修改的数据一个选择器(id或者class)都行

2、因为修改数据库时候需要ID,所以给它一个属性等于你的ID用来传值,我用的是b(这个你可以随意起名)

 <table border="1">
            <tr>
                <td>姓名</td>
            </tr>
            <?php foreach($user as $k=>$v){?>
            <tr>
                <td>
                    <span id="name" <span style="color:#FF0000;">b="<?php echo $v["user_id"]?>"</span>><?php echo $v["user_name"]?></span>
                </td>
            </tr>
            <?php }?>
        </table>

3、触发点击事件,执行以下代码

<script>
   $(document).on("click","#name", function () {
       //获取当前对象
       var obj = $(this);
       //获取当前数据唯一ID
       var user_id = obj.attr("b");
       //获取当前操作文本的内容
       var qian = obj.text();
       // 将当前文本内容替换为文本框并给它默认原来的值
       obj.parent().html("<input type="text" id="text" value= ""+qian+"" />");
       //获得文本框焦点
       $("#text").focus();
       //给文本框一个失去焦点事件
       $("#text").blur(function(){
           //获取你在文本框李输入的值
           var hou = $("#text").val();
           //ajax修改数据库
           $.get("?r=jdjg/gai",{user_name:hou,user_id:user_id},function(res){

               if(res == 1){
                   //修改数据成功时,将文本框改为span标签,并显示修改后的值
                   $("#text").parent().html("<span id="name">"+hou+"</span>");
               }else{
                   alert("修改失败")
               }
           })
       })
   })
</script>

声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。