很多时候需要修改数据,就用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"]; ?> |
jquery 双击编辑并保存数据
最新推荐文章于 2022-12-20 17:23:14 发布