jquery ajax实现双击内容变input框可编辑

admin web前端 暂无评论 1,843 浏览

我在很多的系统中会看到一些文字内容我们只要双击它就变成了可编辑的input框了，这样我们离开时就会自动保存编辑的内容了，下面我也来学习学习吧。

例子。

 代码如下 复制代码
$(function(){
$(“tbody>tr:even”).addClass(“dan”);
$(“tbody>tr>td”).dblclick(function(){
var inval = $(this).html();
var infd = $(this).attr(“fd”);
var inid = $(this).parents().attr(“id”);
$(this).html(“ “);
$(“#edit”+infd+inid).focus().live(“blur”,function(){
var editval = $(this).val();
$(this).parents(“td”).html(editval);
$.post(“post.php”,{id:inid,fd:infd,val:editval});
})
});
});

html

<tbody>
<tr id="1">
<td fd="t">PHP100视频1</td><td fd="d">2011</td><td fd="a">上海</td></tr>
<tr  id="2">
<td fd="t">PHP100视频2</td><td fd="d">2012</td><td fd="a">杭州</td></tr>
<tr  id="3">
<td fd="t">PHP100视频3</td><td fd="d">2011</td><td fd="a">济南</td></tr>
<tr  id="4">
<td fd="t">PHP100视频4</td><td fd="d">2011</td><td fd="a">北京</td></tr>
</tbody>

例子（完整)

 代码如下 复制代码
html页面
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery_dblclick.js"></script>
</head>
<body>

<table border="1">
<thead>
<tr>
<td>标题</td>
<td>时间</td>
<td>地点</td>
</tr>
<thead>
<tbody>
<tr id="1">
<td fd="t">第一个</td>
<td fd="d">2012</td>
<td fd="a">上海</td>
</tr>
<tr id="2">
<td fd="t">第二个</td>
<td fd="d">2012</td>
<td fd="a">北京</td>
</tr>
<tr id="3">
<td fd="t">第三个</td>
<td fd="d">2012</td>
<td fd="a">济南</td>
</tr>
</tbody>
</table>
</body>
</html>

js页面

 代码如下 复制代码
$(function() {
$("tbody>tr>td").dblclick(function(){
var inval = $(this).html();                            //获得td里的html内容
var infd = $(this).attr("fd");                        //获得td的fd属性的值
var inid = $(this).parent().attr("id");                //获得td的父节点id属性的值

//把td里的html内容变为input框，并赋值
$(this).html("<input type='text' id='edit"+infd+inid+"' value='"+inval+"'>");

//input框获得焦点，以及失去焦点后的处理
$("#edit"+infd+inid).focus().live("blur",function() {
var editval = $(this).val();                //获得input框中的值

$(this).parent().html(editval);                //把得到的值赋给input框父节点的html

//post表单提交
$.post("jquery_dblclick.php",{id:inid,fd:infd,val:editval},function(data) {
alert(data);
})
})
})
})

php页面:

 代码如下 复制代码
<?php
header( "Content-Type:text/html;charset=UTF-8");

$conn = mysql_connect("localhost","root","");
mysql_select_db("test",$conn);
mysql_query("set names utf8");

echo $val = $_POST[val];

?>

相关博文

jquery ajax实现双击内容变input框可编辑
赏
标签: