PHP Ajax实现表格实时编辑
时间:2019-03-30
本文章向大家介绍PHP 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("更新失败"); } } }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
- POJ 3662 Telephone Lines【Dijkstra最短路+二分求解】
- 洛谷 P1177 【模板】快速排序【13种排序模版】
- 一步一步深入理解Dijkstra算法
- 51 Nod 1791 合法括号子段【分治+字符串】
- ifconfig: command not found CentOS专版,其他的可以参考
- Codeforces 833E Caramel Clouds
- Codeforces 833D Red-black Cobweb【树分治】
- Codeforces 834E The Bakery【枚举+数位dp】
- 【Java学习笔记之一】java关键字及作用
- 如何让所有实体类用相同名称的主键(很有力的问题,比如所有表实体主键都用ID)
- Codeforces 834D The Bakery【dp+线段树维护+lazy】
- memcached安装及.NET中的Memcached.ClientLibrary使用详解
- AtCoder Beginner Contest 069【A,水,B,水,C,数学,D,暴力】
- 2017"百度之星"程序设计大赛 - 资格赛【1001 Floyd求最小环 1002 歪解(并查集),1003 完全背包 1004 01背包 1005 打表找规律+卡特兰数】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法