PHP+ajax实现可以编辑的单元格点击可以修改

php中文网

发布时间：2016-05-25 16:55:08

1139人浏览过

来源于php中文网

原创

本文章来给大家介绍一个PHP+ajax实现可以编辑的单元格点击可以修改实例效果代码，有需了解的同学可进入参考。

数据库结构

代码如下

复制代码

-- phpMyAdmin SQL Dump
-- version 2.11.2-rc1
-- http://www.phprm.com
--
-- 主机: localhost
-- 生成日期: 2010 年 11 月 09 日 05:34
-- 服务器版本: 5.0.41
-- PHP 版本: 5.2.4

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

--
-- 数据库: `demo`
--

-- --------------------------------------------------------

立即学习“PHP免费学习笔记（深入）”；

--
-- 表的结构 `customer`
--

CREATE TABLE IF NOT EXISTS `customer` (
`id` int(11) NOT NULL auto_increment,
`username` varchar(100) NOT NULL,
`solutation` varchar(40) NOT NULL,
`phone` varchar(50) NOT NULL,
`company` varchar(100) NOT NULL,
`mobile` varchar(50) NOT NULL,
`source` varchar(50) NOT NULL,
`sdate` date NOT NULL,
`job` varchar(50) NOT NULL,
`web` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
`createtime` datetime NOT NULL,
`modifiedtime` datetime default NULL,
`note` varchar(500) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=2 ;

--
-- 导出表中的数据 `customer`
--

INSERT INTO `customer` (`id`, `username`, `solutation`, `phone`, `company`, `mobile`, `source`, `sdate`, `job`, `web`, `email`, `createtime`, `modifiedtime`, `note`) VALUES
(1, '李小三', '先生', '(513) 378-6268', '常丰集团', '13800138000', '合作伙伴', '2011-11-30', '部门经理', 'www.helloweba.com', 'lrfbeyond@163.com', '2010-11-04 21:11:59', '2010-11-08 09:30:35', '备注信息n');

php代码

代码如下

复制代码

include_once("connect.php");
$query=mysql_query("select * from customer where id=1");
$rs=mysql_fetch_array($query);
$username=$rs['username'];
$userid=$rs['userid'];
$solutation=$rs['solutation'];
$phone=$rs['phone'];
$company=$rs['company'];
$mobile=$rs['mobile'];
$source=$rs['source'];
$sdate=$rs['sdate'];
$job=$rs['job'];
$web=$rs['web'];
$email=$rs['email'];
$createtime=$rs['createtime'];
$modifiedtime=$rs['modifiedtime'];
$note=$rs['note'];
?>

可编辑的表格：jQuery+PHP实现实时编辑表格字段内容-Helloweba演示平台

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jeditable.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript"><br>$(function(){<br>$('.edit').editable('save.php');<br>$('.edit_select').editable('save.php', {<br>loadurl : 'json.php',<br>type : "select",<br>style : 'display: inline'<br>});<p>$(".edit_email").editable('save.php', {<br>type : 'email',<br>select : true<br>});<br>$(".edit_mobile").editable('save.php', {<br>type : 'mobile',<br>select : true<br>});<br>$(".edit_web").editable('save.php', {<br>type : 'url',<br>select : true<br>});<br>});<br></script>

可编辑的表格：jQuery+PHP实现实时编辑表格字段内容

提示：点击表格中字段对应的内容即可进行在线编辑。

客户信息
姓名		办公电话
称谓		手机
公司名称		电子邮箱
潜在客户来源		网站
职位		修改时间

sava.php代码

代码如下

复制代码

include_once("connect.php");

$field=$_POST['id'];

$val=$_POST['value'];
$val = htmlspecialchars($val, ENT_QUOTES);
if($field=="note"){
if(strlen($val)>100){
  echo "您输入的字符大于100字了";
  exit;
}
}
$time=date("Y-m-d H:i:s");
if(empty($val)){
    echo "不能为空";
}else{
$query=mysql_query("update customer set $field='$val',modifiedtime='$time' where id=1");
if($query){
    echo $val;
}else{
    echo "数据出错";
}
}
?>