如果我們的對于一個表格中所有的數據都能在本頁進行操作那該是多酷炫的一件事(用起來炒雞爽)！

用Ajax就可以實現這個功能啦。廢話不多說，下面貼出我寫的demo吧哈哈。我用的TP框架(3.2)比較習慣啦。

首先是HTML代碼部分：

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

AJAX實時編輯TAB1TAB2TAB3TAB4添加

{$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("更新失敗");

}

}

}

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

數據庫建表我就不貼啦，自己想咋建就咋建(你開心就好嘻嘻)

總結

以上是生活随笔為你收集整理的ajax制作表格,Ajax实现表格实时编辑(示例代码)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。