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

用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. 在 iOS 中使用 iconfont

    如何使用自定义字体 在讲icon font之前,首先先来看看普通自定义字体是如何在ios中使用的,两个原理是一样的.这里以KaushanScript-Regular为例:   Step 1: 导入字体 ...

  2. 华南理工大学“三七互娱杯”程序设计竞赛 HRY and codefire(概率期望DP)

    https://ac.nowcoder.com/acm/contest/874/A 题目:有两个账号 , 一开始都为0级 , 求任意一个账号升级到N的期望 要求:如果当前账号嬴了 , 就继续沿用当前的 ...

  3. HLS:OpenCV和RTL代码转换关系

    OpenCV 图像处理是基于存储器帧缓存而构建的, 它总是假设视频帧数据存放在外部 DDR 存储器中. 由于处理器的小容量高速缓存性能的限制, 因此, OpenCV 访问局部图像性能较差. 并且, 从 ...

  4. 5 个 iOS 和 Android 最佳的开源自动化工具[转]

    自动化测试时下在产品测试上有着非常重要的作用.实现测试自动化有多种积极的方式,包括最大限度地减少测试执行时间:在关键的发布阶段,用更少的时间确保更大的覆盖范围:在产品开发阶段,可靠又重复性地运行以确保 ...

  5. teleport助手不可以使用剪切板的问题解决

    在使用teleport堡垒机的时候,你使用teleport助手会发现不可以使用剪切板,接下来就是解决方法. 解决办法:更新freerdp 基于环境:win10(win7下更新好像没有用),telepo ...

  6. MYSQL的NOW和SYSDATE函数的区别

    在MySQL Performance Blog博客上看到一篇文章介绍now()和sysdate()函数. 想起很多朋友专门问在MySQL里面提供now()和sysdate()函数,都是表示取得当前时间 ...

  7. Hibernate 4.3 SessionFactory

    Configuration configuration = new Configuration().configure(); //以下这两句就是4.3的新用法 StandardServiceRegis ...

  8. 【c++】字符串流输出恢复状态问题

    缘起 #include <iostream> #include <sstream> using namespace std; int main() { istringstrea ...

  9. vue做的简单购物车

    <code><!DOCTYPE html><html><head lang="en"> <meta charset=" ...

  10. OpenStack 组成 架构

    Components of OpenStack OpenStack is on a mission: to provide scalable, elastic cloud computing for ...