这篇文章主要介绍PHP+ajax如何实现表格实时编辑，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！如果我们的对于一个表格中所有的数据都能在本页进行操作那该是多酷炫的一件事！用Ajax就可以实现这个功能啦。废话不多说，
这篇文章主要介绍PHP+ajax如何实现表格实时编辑，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
如果我们的对于一个表格中所有的数据都能在本页进行操作那该是多酷炫的一件事！
用Ajax就可以实现这个功能啦。废话不多说，下面贴出我写的demo吧哈哈。我用的TP框架（3.2）比较习惯啦。
首先是HTML代码部分：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>AJAX实时编辑</title><script src="__PUBLIC__/Jquery-1.7.2.min.js"></script></head><body><center><table border="1" width="1000" id="g_table"><tr><!-- <th>ID</th> --><th>TAB1</th><th>TAB2</th><th>TAB3</th><th>TAB4</th><th><span onclick="add()">添加</span></th></tr><foreach name="tablist" item="vv"><tr><!-- <td>{$vv.id}</td> --><input type="hidden" name="id" value="{$vv.id}"><td>{$vv.tab1}</td><td>{$vv.tab2}</td><td>{$vv.tab3}</td><td>{$vv.tab4}</td><td><span onclick="del(this)" id="del">删除</span><span onclick="edit(this)" id="edit">修改</span></td></tr></foreach></table></center></body><script>var g_table = $("#g_table");function add(){var addRow = $("<tr></tr>");g_table.append(addRow);for(var i = 0;i < 4;i++){var col_td = $("<td><input type='text' /></td>");addRow.append(col_td);}var col_opt = $("<td></td>");var confirmBtn = $("<a href='javascript:;'>确认</a>");var cancelBtn = $("<a href='javascript:;'>取消</a>");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 = "<td><input type='text' value='" + $(obj).parent().parent().children().eq(i).html() + "'/></td>";$(obj).parent().parent().children().eq(i).replaceWith(temp);}var confirmBtn1 = $("<span id='confirm'>确认</span>");var cancelBtn1 = $("<span onclick='back()'>取消</span>");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();} </script></html>下面是控制器中的代码：
<?php namespace Home\Controller;use Think\Controller;class AjaxController extends Controller{public function index(){$tab = M('table');$tablist = $tab->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是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，可以通过在后台与服务器进行少量数据交换，使网页实现异步更新。
以上是“PHP+Ajax如何实现表格实时编辑”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网PHP编程频道！
--结束END--
本文标题: PHP+Ajax如何实现表格实时编辑
本文链接: https://www.lsjlt.com/news/252559.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0