ajax制作表格,Ajax实现表格实时编辑(示例代码)

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

用Ajax就可以实现这个功能啦。废话不多说，下面贴出我写的demo吧哈哈。我用的TP框架(3.2)比较习惯啦。

首先是HTML代码部分：

#####################################################################

AJAX实时编辑

TAB1	TAB2	TAB3	TAB4	添加
{$vv.tab1}	{$vv.tab2}	{$vv.tab3}	{$vv.tab4}	删除修改

var g_table = $("#g_table");

function add(){

var addRow = $("

");

g_table.append(addRow);

for(var i = 0;i < 4;i++){

var col_td = $("

");

addRow.append(col_td);

}

var col_opt = $("

");

var confirmBtn = $("确认");

var cancelBtn = $("取消");

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 = "

";

$(obj).parent().parent().children().eq(i).replaceWith(temp);

}

var confirmBtn1 = $("确认");

var cancelBtn1 = $("取消");

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();

}

#####################################################################

下面是控制器中的代码：

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("更新失败");

}

}

}

#####################################################################

数据库建表我就不贴啦，自己想咋建就咋建(你开心就好嘻嘻)