How PHP+Ajax realizes real-time editing of tables

This time I will show you how PHP+Ajax realizes real-time editing of tables. What are the precautions for PHP+Ajax to realize real-time editing of tables. The following is a practical case, let’s take a look.

What a cool thing it would be if we could operate all the data in a table on this page (it’s so fun to use)!

This function can be achieved using Ajax. Without further ado, let me post the demo I wrote below, haha. I am more accustomed to the TP framework (3.2) I use.

First is the HTML code part:

nbsp;html>


<meta>
<title>AJAX实时编辑</title>
<script></script>


<center>
<table>
<tr>
<!-- <th>ID</th> -->
<th>TAB1</th>
<th>TAB2</th>
<th>TAB3</th>
<th>TAB4</th>
<th><span>添加</span></th>
</tr>
<foreach>
<tr>
<!-- <td>{$vv.id}</td> -->
<input>
<td>{$vv.tab1}</td>
<td>{$vv.tab2}</td>
<td>{$vv.tab3}</td>
<td>{$vv.tab4}</td>
<td>
<span>删除</span><span>修改</span>
</td>
</tr>
</foreach>
</table>
</center>

<script>
var g_table = $("#g_table");
function add(){
var addRow = $("<tr>");
g_table.append(addRow);
for(var i = 0;i < 4;i++){
var col_td = $("<td><input type=&#39;text&#39; />");
addRow.append(col_td);
}
var col_opt = $("<td>");
var confirmBtn = $("<a href=&#39;javascript:;&#39;>确认");
var cancelBtn = $("<a href=&#39;javascript:;&#39;>取消");
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[&#39;clo_&#39; + i] = input_files[i].value;
}
// $.post("{:U(&#39;ajax/add&#39;)}",post_files,function(msg){
// debugger;
// })
$.ajax({
type: &#39;post&#39;,
url : "{:U(&#39;ajax/add&#39;)}",
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: &#39;post&#39;,
url: "{:U(&#39;ajax/del&#39;)}",
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=&#39;text&#39; value=&#39;" + $(obj).parent().parent().children().eq(i).html() + "&#39;/>";
$(obj).parent().parent().children().eq(i).replaceWith(temp);
}
var confirmBtn1 = $("<span id=&#39;confirm&#39;>确认");
var cancelBtn1 = $("<span onclick=&#39;back()&#39;>取消");
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[&#39;clo_&#39; + i] = input_files[i].value;
}
$.ajax({
type: &#39;post&#39;,
url : "{:U(&#39;ajax/edit&#39;)}",
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>

The following is the code in controller:

<?php  
namespace Home\Controller;
use Think\Controller;
class AjaxController extends Controller{
public function index(){
$tab = M(&#39;table&#39;);
$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("更新失败");
}
}
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Ajax+Spring to implement file upload

How to use Ajax to dynamically load data

How does Ajax realize the progress bar of uploading files Codular

The above is the detailed content of How PHP+Ajax realizes real-time editing of tables. For more information, please follow other related articles on the PHP Chinese website!