这次给大家带来PHP+Ajax如何实现表格的实时编辑，PHP+Ajax实现表格实时编辑的注意事项有哪些，下面就是实战案例，一起来看一下。
如果我们的对于一个表格中所有的数据都能在本页进行操作那该是多酷炫的一件事（用起来炒鸡爽）！
用Ajax就可以实现这个功能啦。废话不多说，下面贴出我写的demo吧哈哈。我用的TP框架（3.2）比较习惯啦。
首先是HTML代码部分：
AJAX实时编辑<!-- --><!-- -->
| ID | TAB1 | TAB2 | TAB3 | TAB4 | 添加 |
|---|
| {$vv.id} | {$vv.tab1} | {$vv.tab2} | {$vv.tab3} | {$vv.tab4} | 删除修改 |
var g_table = $("#g_table");function add(){var addRow = $("");g_table.append(addRow);for(var i = 0;i < 4;i++){var col_td = $("");addRow.append(col_td);}var col_opt = $("");var confirmBtn = $("
确认");var cancelBtn = $("
取消");cancelBtn.click(function(){window.location.reload();});confirmBtn.click(function(){var currentRow = $(this).parent().parent();var input_files = currentRow.find("input");var post_files = {};for(var i = 0 , j = input_files.length;i < j;i++){post_files['clo_' + i] = input_files[i].value;}// $.post("{:U('ajax/add')}",post_files,function(msg){// debugger;// })$.ajax({type: 'post',url : "{:U('ajax/add')}",data: {post_files},success:function(msg){alert(msg);window.location.reload();}})});col_opt.append(confirmBtn);col_opt.append(cancelBtn);addRow.append(col_opt);}function del(obj){var id = $(obj).parent().prev().prev().prev().prev().prev().val();$.ajax({type: 'post',url: "{:U('ajax/del')}",data: {id:id},success:function(msg){alert(msg);}})$(obj).parent().parent().remove();}function edit(obj){var id = $(obj).parent().prev().prev().prev().prev().prev().val();for(var i = 1;i < 5;i++){var temp = "";$(obj).parent().parent().children().eq(i).replaceWith(temp);}var confirmBtn1 = $("
确认");var cancelBtn1 = $("
取消");confirmBtn1.click(function(){var currentRow = $(this).parent().parent();var input_files = currentRow.find("input");var post_files = {};for(var i = 0 , j = input_files.length;i < j;i++){post_files['clo_' + i] = input_files[i].value;}$.ajax({type: 'post',url : "{:U('ajax/edit')}",data: {post_files:post_files,id:id},success:function(msg){alert(msg);window.location.reload();}}) });$(obj).prev().replaceWith(confirmBtn1);$(obj).replaceWith(cancelBtn1);}function back(){location.reload();}
登录后复制
下面是控制器中的代码：
select();$this->assign('tablist',$tablist);$this->display();}public function del(){$map['id'] = $_POST['id'];$tab = M('table');$info = $tab->where($map)->delete();if($info){$this->ajaxReturn("删除成功");}else{$this->ajaxReturn("删除失败");}}public function add(){$map['tab1'] = $_POST['post_files']['clo_0'];$map['tab2'] = $_POST['post_files']['clo_1'];$map['tab3'] = $_POST['post_files']['clo_2'];$map['tab4'] = $_POST['post_files']['clo_3'];$tab = M('table');$res = $tab->add($map);if($res){$this->ajaxReturn("添加成功");}else{$this->ajaxReturn("添加失败");}}public function edit(){$id = $_POST['id'];$map['tab1'] = $_POST['post_files']['clo_1'];$map['tab2'] = $_POST['post_files']['clo_2'];$map['tab3'] = $_POST['post_files']['clo_3'];$map['tab4'] = $_POST['post_files']['clo_4'];// dump($map);exit;$tab = M('table');$res = $tab->where('id='.$id)->save($map);if($res){$this->ajaxReturn("更新成功");}else{$this->ajaxReturn("更新失败");}}}
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Ajax+Spring实现文件上传
怎么用Ajax实现动态加载数据的功能
Ajax怎么实现上传文件的进度条Codular
立即学习“PHP免费学习笔记（深入）”；
以上就是PHP+Ajax如何实现表格的实时编辑的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2776612.html
