<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<script language="JavaScript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"> </script>
</head>
<body>
<table>
<tr>
<td><span class="forupdate" name="price" id="price">1234.56</span></td>
</tr>
<tr>
<td><span class="forupdate" name="number" id="number">55</span></td>
</tr>
</table>
<script language="JavaScript">
<!--
$(document).ready(function(){
$('.forupdate').dblclick(function(){
var Input = "<input type='text' >";
var InputValue = $(this).text();
$(this).html( Input );
$(this).children('input').attr('name', $(this).attr('name')+'_update')
.attr('id', $(this).attr('id')+'_update')
.val( InputValue );
$('#'+$(this).attr('id')+'_update').focus()
.blur( function(){
//这里用ajax如果成功,再返回。否则。。
//....现在不处理。
$ajaxReturn = true;
if( $ajaxReturn == true){
$(this).parent().html( $(this).val() ) ;
}
});
});
});
//-->
</script>
</body>
</html>
可以拷贝到编辑器里,双击数字进行测试……
后记:虽然知道这种控件网上会很多,但是没料到会这么多……
贴一个地址吧,也是jQuery的插件:http://www.appelsiini.net/projects/jeditable,NND啥时候一生气,也搞成插件出来……

