jQuery双击表格修改内容，ajax实时修改内容
来源：原创
时间：2015-08-26
作者：脚本小站
分类：JS/JQuery
双击表格即可修改对应表格内容，对于经常要修改的文本字段很实用。
1.jquery地址要换成自己的。
2.post参数中的地址要换成自己的，会向这个页面过去一个数组。可以改成get传输，这样调试要方便一点。
<!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>