如果我们的对于一个表格中所有的数据都能在本页进行操作那该是多酷炫的一件事（用起来炒鸡爽）！
用Ajax就可以实现这个功能啦。废话不多说，下面贴出我写的demo吧哈哈。我用的TP框架（3.2）比较习惯啦。
首先是HTML代码部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AJAX实时编辑</title> <script src="https://www.jb51.net/__PUBLIC__/jquery-1.7.2.min.js"></script> </head> <body> <center> <table> <tr> <!-- <th>ID</th> --> <th>TAB1</th> <th>TAB2</th> <th>TAB3</th> <th>TAB4</th> <th><span>添加</span></th> </tr> <foreach item="vv"> <tr> <!-- <td>{$vv.id}</td> --> <input type="hidden" value="{$vv.id}"> <td>{$vv.tab1}</td> <td>{$vv.tab2}</td> <td>{$vv.tab3}</td> <td>{$vv.tab4}</td> <td><span>删除</span><span>修改</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>确认</span>"); var cancelBtn1 = $("<span>取消</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("更新失败"); } } }