PHP100视频教程112:Jquery案例 之 双击编辑异步更新
2013-03-16 10:30
585 查看
<!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>
相关文章推荐
- PHP100视频教程111:Jquery案例 之 复选框与隔行换色
- <JQuery>双击编辑异步更新
- php100视频教程下载(全集含解压密码)更新至112集
- PHP第一季视频教程(李炎恢+php100 不断更新)
- <JQuery>双击编辑异步更新
- PHP第一季视频教程(李炎恢+php100 不断更新)
- 每周更新PHP100视频教程最新解压密码[更新至最新88讲]
- <JQuery>双击编辑异步更新
- php100 2012视频教程 汽车维修 C#高级编程视频教程 服装设计 时尚类视频教程分享 持续更新中~~
- jquery——双击编辑异步更新(双击内容变input框可编辑,失去焦点后修改的数据异步提交)
- PHP100视频教程75:Zend framework 配置与调试 解压密码
- 分享70套约2000个视频教程(js,Jquery,java,.net,html5,php,数据库)
- 【转】 PHP100视频教程(2012-2013版)
- PHP+MYSQL新闻系统开发之PHP100视频教程69
- PHP100视频教程2012版解压密码
- PHP通过mail()或Socket发邮件之PHP100视频教程42
- PHP100视频教程1:环境配置与代码调试
- PHP socket编程案例,参照视频教程
- [转]PHP100视频教程(2012-2013版)下载地址及密码
- 最新php100视频教程的解压密码(截止83课时)