PHP100视频教程112：Jquery案例之双击编辑异步更新

最新推荐文章于 2021-04-07 03:27:55 发布

jaray

最新推荐文章于 2021-04-07 03:27:55 发布

阅读量813

点赞数

分类专栏：实例 js ajax

js 同时被 3 个专栏收录

60 篇文章 0 订阅

订阅专栏

ajax

26 篇文章 0 订阅

订阅专栏

实例

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="gbk">
<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");//被鼠标点击的行，加dan样式
     
	    $("tbody>tr>td").dblclick(function(){//被双击的格中取得当前格中的html值、fd属性、上一层元素的id属性
		  var inval = $(this).html();
		  var infd = $(this).attr("fd");
		  var inid =  $(this).parents().attr("id");
			$(this).html("<input id='edit"+infd+inid+"' value='"+inval+"'> ");//被双击的格，变成输入框，并给该框斌值和id

			$("#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>

jaray

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PHP100视频教程112：Jquery案例之双击编辑异步更新

PHP100视频教程 jquery 双击编辑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-botto
复制链接

扫一扫