首页技术博客 技术经验 正文

jquery 双击编辑并保存数据代码

2021-09-20 837 0条评论

很多时候需要修改数据,就用jq做了个双击文字能实现修改并保存数据的


部分代码如下:


XML/HTML代码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  


<html xmlns="http://www.w3.org/1999/xhtml">  


<head>  


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  


<title>测试用的</title>  


<script language="javascript"  src="demo2/jquery-1.3.2.min.js"></script>  


</head>  


<body>  


<table width="66%" border="0" cellspacing="0" cellpadding="0">  


        <tr>  


                <td height="29" align="center"><strong>用户名</strong></td>  


                <td align="center"><strong>邮件地址</strong></td>  


        </tr>  


        <tr>  


                <td class="unm" uid=1 id="unm1" filed="unm">用户A</td>  


                <td class="email"  uid=1 id="email1" filed="email">usera@domain.con</td>  


        </tr>  


        <tr>  


                <td class="unm"  uid=2 id="unm2" filed="unm">用户B</td>  


                <td class="email"  uid=2 id="email2" filed="email">userb@domain.com</td>  


        </tr>  


</table>  


</body>  


</html>  


 


其中html代码中 td标签中有2个自定义属性,uid,filed ,第一个uid用来表示数据库中对应表中的id字段,filed用来表示这个td里面的数据代表表中哪个字段的


 


JavaScript代码


 


<script language="javascript">   


$().ready(function(){   


$(".unm,.email").dblclick(function(){   


    id=$(this).attr("uid");   


    value=$(this).text();   


    f=$(this).attr("field");   


    text_id=$(this).attr("id");   


    if(value)   


    {   


        $(this).html("<input type='text' id="+id+"   name="+f+" value="+value+">");   


        $(".unm > input,.email>input").focus().blur(function(){   


         


                $.ajax({   


                 type: "POST",   


                 url: "save.php",   


                 data:   "id="+id+"&type="+f+"&value="+$("#"+id).val(),   


                 success: function(msg){ $("#"+text_id).text(msg); }   


                });   


            })   


  


    }   


       


})   


  


})   


  


</script>  


 


 


save.php


<?php   


//保存到数据库   


  


if($_POST["type"]=="email")   


{   


    //mysql_query("update sometable set email='{$_POST["value"]}' where id={$_POST["id"]}");   


}   


  


if($_POST["type"]=="unm")   


{   


//mysql_query("update sometable set unm='{$_POST["value"]}' where id={$_POST["id"]}");   


}   


  


echo $_POST["value"];   


?>  


文章版权及转载声明

本文作者:符文浩 网址:http://blog.fuwenhao.com/post/455.html 发布于 2021-09-20
文章转载或复制请以超链接形式并注明出处。

发表评论

快捷回复:

评论列表 (暂无评论,837人围观)参与讨论

还没有评论,来说两句吧...

取消
微信二维码
微信二维码
支付宝二维码