jquery双击编辑并保存数据jquery

/ / 2016-09-24 阅读：2494

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

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+CSS实现【返回顶部】按钮，不需

下一篇：jQuery仿Facebook图片画廊代码

阅读延展

jquery双击编辑并保存数据jquery

我要评论

最新评论