jQuery双击表格内容可以修改表格中的内容
来源：原创
时间：2015-08-14
作者：脚本小站
分类：JS/JQuery
此段代码实现双击表格内容可以修改表格中的内容
可以直接复制演示，jquery好换成自己的地址，post请求地址改成自己的。
<!DOCTYPE html>
<html>
<head>
<script src="__PUBLIC__/js/jquery.min.js"></script>
</head>
<body>
<table>
<tr>
<!-- 表格中要书写的信息 -->
<td id="{$vo.id}" field="menu">{$vo.menu}</td>
</tr>
</table>
</body>
<script>
$(function (){
//双击修改
$('.edit').dblclick(function (){
if($(this).children("input").length>0){return false;}
var con = $(this).html();
var field = $(this).attr('field');
var id = $(this).attr('id');
var w = this.offsetWidth-3;
var h = this.offsetHeight-5;
$(this).html("<input id='"+id+field+"' value='"+con+"' style='width:"+w+"px;height:"+h+"px;border:0px solid #fff;outline:0;'>");
$('#'+id+field).focus().on('blur',function (){
var newVal = $(this).val();
$(this).parents('td').html(newVal);
if(con != newVal){
//传过去的是一个post数组 array('id'=>'12','field'=>'username','val'=>'qiyang')
$.post('__MODULE__/MovieCategory/update',{id:id,field:field,val:newVal});
}
});
});
});
</script>
</html>