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>