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

2022-06-19 0 815

很多时候需要修改数据,就用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”];

?>

 

 

 

 

 

 

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

黑龙江省声美网络科技有限公司 技术经验 jquery 双击编辑并保存数据代码 http://www.fuwenhao.com/302.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务