php和ajax怎么实现表格的实时编辑（附代码）

异步搜索过滤内容数据（关键字搜索）

表单异步验证(表单提交验证)

异步加载内容数据(更多内容)

数据逻辑处理

在不刷新当前页面的前提下，与服务器进行异步交互

优化了浏览器和服务器之间的数据传输、减少了不必要的数据往返

把部分数据转移到客户端，减少了服务器的压力

根据需求选择一个javascript类库

javascript部分向服务器传递数据

php接受传递的数据，处理数据，返回给javascript

javascript接受php的数据，并做相应处理

前端方面:html css javascript jquery json

服务器方面:php apache(nginx)

数据库方面:mysql sql

学习php和javascript之间异步交互

理解ajax代码的运行结构和基本原理

清晰布局javascript代码

创建基本的数据表

完成显示功能

完成删除数据功能

完成添加数据功能

完成修改数据功能

create table et_data( id int primary key auto_increment, c_a varchar(30), c_b varchar(30), c_c varchar(30), c_d varchar(30), c_e varchar(30), c_f varchar(30), c_g varchar(30), c_h varchar(30));

显示出来一个基本的html

$.get===== data.php

data.php获取db数据== js

js= 生成行，扔给基本html

UI添加按钮，8个文本框 操作列

取消功能

确认添加按钮，收集UI数据— data.php

data.php — js

列表正常显示，刷新后记录仍然存在

给编辑按钮添加事件 ，替换UI 删除按钮– 保存按钮 编辑按钮—- 取消按钮

取消编辑事件

保存编辑的事件,手机数据- data.php

data.php- js

js 行编辑状态= 正常状态

1、样式：main.css

body{background-color:#899BA5;}.container {width:960px;margin:80px auto;}td {font-size:20px;width:120px;height:40px;text-align:center;color:black;cursor:pointer;background-color:white;}td:hover{background-color:#aaaacc;}input.txtField{width:90px;height:30px;}.optLink{text-decoration:none; color:#f46948;}.optLink:hover{color:#cc0033;}

2、基础模板：index.html

 !doctype html html  head  meta charset= utf-8  title 可编辑表格DEMO /title  link rel= stylesheet href= css/main.css  /head  body  p >
3、JS代码:app.js
$(function(){ var g_table = $( table.data //定义全局变变量，定位到html的表格 var init_data_url = data.php?action=init_data_list  $.get(init_data_url,function(data){ var row_items = $.parseJSON(data);//json数据转换成json数组对象 //js循环遍历 for(var i = 0 , j = row_items.length ; i i++){  var data_dom = create_row(row_items[i]); g_table.append(data_dom); }); //循环生成行记录 function create_row(data_item){ var row_obj = $( tr /tr  for(var k in data_item){  if( id != k){//去除返回字段中的id var col_td = $( td /td  col_td.html(data_item[k]);//给col_td写入内容 row_obj.append(col_td);//追加DOM } //自定义按钮 var delButton = $( a >
4、PHP代码:data.php
 ?php$action = $_GET[ action switch($action){ case init_data_list : init_data_list();  break;  case add_row : add_row();  break;  case del_row : del_row();  break;  case edit_row : edit_row();  break;}//初始化数据function init_data_list(){ $sql = SELECT * FROM `et_data` //下面函数的参数 $query = query_sql($sql);//自定义函数未定义形参 while ($row = $query- fetch_assoc()) {  $data[] = $row; } echo json_encode($data);exit();}//新增行记录function add_row(){ $sql = INSERT INTO `et_data` ( `c_a`,`c_b`,`c_c`,`c_d`,`c_e`,`c_f`,`c_g`,`c_h` ) VALUES (  for($i = 0;$i $i++){  $sql .= / . $_POST[ col_ . $i] . / ,  } $sql = trim($sql, , $sql .= )  $lastInsertId = SELECT LAST_INSERT_ID() AS LD  if($res = query_sql($sql,$lastInsertId)){  $d = $res- fetch_assoc();  echo $d[ LD exit(); }else{  echo db error... exit();}//删除行记录function del_row(){ $dataid = $_POST[ dataid  $sql = DELETE FROM `et_data` where `id` = . $dataid;  if(query_sql($sql)){  echo ok exit(); }else{  echo db error... exit();}//编辑行记录function edit_row(){ $sql = UPDATE `et_data` SET  $id = $_POST[ id  unset($_POST[ id  for($i=0;$i $i++){  $sql .= `c_ .chr(97 + $i) . ` = / .$_POST[ col_ . $i] . / ,  $sql = trim($sql, ,  $sql .= WHERE `id` = . $id;  if(query_sql($sql)){  echo ok exit(); }else{  echo db error... exit();}//数据库查询function query_sql(){ $mysqli = new mysqli( 127.0.0.1 , root , root , etable  $sqls = func_get_args();//获取函数的所有参数 foreach ($sqls as $key = $value) {  $query = $mysqli- query($value); $mysqli- close();  return $query;}
源码链接：http://pan.baidu.com/s/1fAinVXU-nWt7ODgrWoNRIg 密码：n5yr
相关推荐：
PHP实现会员账号只能唯一登录的代码实例
phpExcel在导出文件时内存溢出的解决方法
以上就是php和ajax怎么实现表格的实时编辑（附代码）的详细内容，PHP教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。