jquery 双击编辑并保存数据

来源：互联网发布：ug软件免费下载编辑：程序博客网时间：2024/04/28 02:49

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

部分代码如下：

XML/HTML代码

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

<head>

</head>

<body>

<tr>

</tr>

<tr>

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

</tr>

<tr>

<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代码

$().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"];