• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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("更新失败");
    }
    }
    }

    以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

    您可能感兴趣的文章:
    • php+ajax实时刷新简单实例
    • php+ajax实时输入自动搜索匹配的方法
    • 值得分享的php+ajax实时聊天室
    • PHP实现的消息实时推送功能【基于反ajax推送】
    • AJAX 实时读取输入文本(php)
    • PHP+Ajax实时自动检测是否联网的方法
    • php+ajax实现无刷新动态加载数据技术
    • php采用ajax数据提交post与post常见方法总结
    • ajax处理php返回json数据的实例代码
    • php+jQuery ajax实现的实时刷新显示数据功能示例
    上一篇:简单实现Ajax无刷新分页效果
    下一篇:Ajax的简单实用实例代码
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    PHP Ajax实现表格实时编辑 PHP,Ajax,实现,表格,实时,