如果我们的对于一个表格中所有的数据都能在本页进行操作那该是多酷炫的一件事（用起来炒鸡爽）！

用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实现表格实时编辑的更多相关文章

  1. PHP+AJAX 实现表格实时编辑

    https://blog.csdn.net/qq_29627497/article/details/81365107 源码链接:https://pan.baidu.com/s/1fAinVXU-nWt ...

  2. js控制表格实时编辑

    点击添加,在表格的最后一行添加一行表单元素,右侧按钮变为保存和取消.(点击保存,数据用ajax无刷新添加到界面,点击取消,取消此行的添加.)点击编辑,在本行改为表单,带有原来的值,右侧按钮变为确认和取 ...

  3. 可编辑的表格：jQuery+PHP实现实时编辑表格字段内容

    在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击“确定”按钮,新的内容将发送到后台PHP程序处理,并保存到数据库:当点击“取消”按钮,则页面恢 ...

  4. FineUI大版本升级，外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架

    这是一篇很长的文章,在开始正文之前,请允许我代表目前排名前 20 中唯一的 .Net 开源软件 FineUI 拉下选票: 投票地址: https://code.csdn.net/2013OSSurve ...

  5. Django前端HTML通过JS实现表格可编辑，动态添加行，回车完成新建文件夹

    功能描述: 点击“新建文件夹”按钮,在table的末尾增加一行:单击页面的新增行,使单元格td变成可编辑状态:输入内容后,当单元格失去焦点时,保存输入的内容:回车后通过AJAX提交后台完成新建文件夹. ...

  6. ElementUI表格行编辑单元格编辑支持（输入框，选择框）Demo

    嗯,需要做成这个样子,所以网上查了些资料.整理了下.提供几个一个思路.不足之处请小伙伴指出来.  普通版的table可编辑内嵌select选择框,输出框,编辑删除添加等 <!DOCTYPE ht ...

  7. CSS实时编辑显示

    方法 CSS实时编辑显示:通过display:block让css文本显示出来,再加上contentEditable使文本可编辑 <!DOCTYPE html> <html> & ...

  8. Puer是一个可以实时编辑刷新的前端服务器

    ##Puer是一个可以实时编辑刷新的前端服务器 确保你安装了nodejs(现在还有没nodejs环境的前端? 拖出去喂狗吧) 使用npm全局安装puer命令 npm install puer -g 输 ...

  9. Swift - 给表格添加编辑功能（删除，插入）

    1,下面的样例是给表格UITableView添加编辑功能: (1)给表格添加长按功能,长按后表格进入编辑状态 (2)在编辑状态下,第一个分组处于删除状态,第二个分组处于插入状态 (3)点击删除图标,删 ...

随机推荐

  1. Junit 测试exception

    有两种方法: 一.使用ExpectedException 仅在junit4.7以上支持.不仅可以测试捕获到某异常,也可以测试异常message. 使用例子如下: @Rule public Expect ...

  2. OPENERP 中自定义模块 找不到的问题

    问题的前提是你写的模块本身没有问题,我自己碰到的情况是在本机运行可以,但是上传到服务器上以后却无论怎么重启服务都找不到模块. 问题的根源在上传的文件权限设置不对: 假设自定义模块为rainsoft_p ...

  3. MFRC522开发笔记

    一.了解基本概念 ①ISO-14443A协议:( 国际标准化组织:International Organization for Standardization)RFID协议的一种;   PICC:临近 ...

  4. Hibernate中Query.list()方法报IllegalArgumentException异常

    最近在使用Hibernate开发项目,在写好hql语句,并初始化Query对象,执行Query.list()方法时,应用报IllegalArgumentException异常.经网上查询,现已经基本决 ...

  5. Struts2方法调用的三种方式(有新的!调用方法的说明)

    在Struts2中方法调用概括起来主要有三种形式 第一种方式:指定method属性 <action name="heroAction" class="com.ABC ...

  6. SOA与微服务

    SOA 面向服务架构,它可以根据需求通过网络对松散耦合的粗粒度应用组件进行分布式部署.组合和使用.服务层是SOA的基础,可以直接被应用调用,从而有效控制系统中与软件代理交互的人为依赖性. SOA是一种 ...

  7. 使用Jasperreporter生成入库出库单打印等报表操作

    项目需要打印报表:就是那种生成入库单,出库单等的操作.使用到的技术:使用iReport Designer5.1.0设计报表,使用struts2+jasperreporter生成最终填充数据的报表 首先 ...

  8. 一文带你入门图像分析，成为AI专家不是梦！

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯云AI中心发表于云+社区专栏 腾讯云高级研究员讲述,从成像到图像分析如何入门 文︱冀永楠 "AI来了"邀请到我 ...

  9. 开源高性能网络库Libevent的简介

    Libevent是什么? Libevent 是一个用C语言编写的.轻量级的开源高性能网络库. 官网:http://libevent.org/ 优点: (1)事件驱动,高性能 (2)轻量级,专注于网络 ...

  10. [转]Web后台模拟前端post（带NTLM验证）

    本文转自:http://www.cnblogs.com/pzstudyhard/p/4805885.html using System.Data; using System.Net; using Sy ...