Home >Web Front-end >JS Tutorial >PHP Ajax realizes real-time editing of tables
This article mainly introduces the method of Ajax to realize real-time editing of tables, which has a good reference and value for learning ajax. Let's follow the editor to see how PHP Ajax implements real-time editing of tables
How cool would it be if we could operate all the data in a table on this page? (It’s great to use to stir-fry chicken)!
This function can be achieved using Ajax. Without further ado, let me post the demo I wrote below, haha. I am more accustomed to the TP framework (3.2) I use.
The first is the HTML code part:
<!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>
The following is the controller Code in:
<?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("更新失败"); } } }
The above is all the content of this article, I hope it will be helpful to everyone!
Related recommendations:
Summary of how to use Ajax and jsonp
A simple method to download files asynchronously with Ajax
Example to explain Ajax mailbox and user name uniqueness verification method
The above is the detailed content of PHP Ajax realizes real-time editing of tables. For more information, please follow other related articles on the PHP Chinese website!