Jquery案例 之 双击编辑异步更新知识点

演示结果如图所示:

操作流程

->数据库查询列表

->增加技巧标记

->双击更改当前位置状态为input框体并获得焦点

->焦点离开抓取新内容修改当前位置,并执行post异步提交


1)、将原始内容放入input

2)、抓取必要标记:编号,字段,值


$(selector).html(content)

html() 函数改变所匹配HTML 元素的内容(innerHTML)。


$(selector)attr(attribute) 

attribute:规定要获取其值的属性


$(selector).parents(selector)

获得当前标签的父元素内容


$(selector).live(event,data,function)

live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数


Jquery案例 之 双击编辑异步更新实例:


前端文件112.html

<html>
<head>
<title>PHP100视频教程 jquery 双击编辑</title>
<style type="text/css">
table	{ border:0;border-collapse:collapse;}
td		{ font:normal 12px/17px Arial;padding:2px;width:100px;}
th		{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.dan	{ background:#FC0}  
.ed	{ background:#669;color:#fff;}
</style>
<script src="jquery-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
  $(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("<input id='edit"+infd+inid+"' value='"+inval+"'> ");

			$("#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});
			})
		});
		
  });
</script>
</head>
<body>
	<table>
		<thead>
		<tr><th>标题</th><th>时间</th><th>地点</th></tr>
		</thead>
		<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>
	</table>
</body>
</html>


后端处理文件post.php

if(!empty($_POST['id'])){
	$id=$_POST['id'];
	$fd=$_POST['fd'];
	$val=$_POST['val'];
   $sql = "update tables set `$fd`='$val' where `id`='$id'";
   echo $sql;
}