php100视频教程112:jquery案例 之 双击编辑异步更新,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-bottom:1px solid #333;}

.dan{ background:#FC0}

.ed{ background:#669;color:#fff;}

$(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(" ");//被双击的格，变成输入框，并给该框斌值和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});//将更新改的值上传服务器

})

});

});

标题时间地点

PHP100视频12011上海PHP100视频22012杭州PHP100视频32011济南PHP100视频42011北京