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

数据库结构

代码如下

复制代码

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

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

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

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

--
-- 表的结构 `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代码

代码如下

复制代码

<?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'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可编辑的表格：jQuery+PHP实现实时编辑表格字段内容-Helloweba演示平台</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<style type="text/css">
table{width:96%; margin:20px auto; border-collapse:collapse;}
table td{line-height:26px; padding:2px; padding-left:8px; border:1px solid #b6d6e6;}
.table_title{height:26px; line-height:26px; background:url(css/btn_bg.gif) repeat-x bottom; font-weight:bold; text-indent:.3em; outline:0;}
.table_label{background:#e8f5fe; text-align:right; }
.btn{height:24px; background:url(css/btn_bg.gif) repeat-x; padding:0 4px; font-size:12px; border:1px solid #ccc; cursor:pointer; margin-left:3px}
.input{border:1px solid #369; background:#ffc; padding:2px}
.msg{padding-left:30px; margin-top:20px}
textarea{font-size:12px}
</style>
<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">
$(function(){
$('.edit').editable('save.php');
$('.edit_select').editable('save.php', {
loadurl : 'json.php',
type : "select",
style : 'display: inline'
});

$(".edit_email").editable('save.php', {
type : 'email',
select : true
});
$(".edit_mobile").editable('save.php', {
type : 'mobile',
select : true
});
$(".edit_web").editable('save.php', {
type : 'url',
select : true
});
});
</script>
</head>

<body>
<div id="main">
<h2 class="top_title"><a href="">可编辑的表格：jQuery+PHP实现实时编辑表格字段内容</a></h2>
<div class="msg"><strong>提示</strong>：点击表格中字段对应的内容即可进行在线编辑。</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr class="table_title">
<td colspan="4"><span class="open"></span>客户信息</td>
</tr>
</thead>
<tbody>
<tr>
<td width="20%" class="table_label">姓名</td>
<td width="30%" class="edit" id="username"><?php echo $username; ?></td>
<td width="20%" class="table_label">办公电话</td>
<td width="30%" class="edit" id="phone"><?php echo $phone; ?></td>
</tr>
<tr>
<td class="table_label">称谓</td>
<td class="edit" id="solutation"><?php echo $solutation; ?></td>
<td class="table_label">手机</td>
<td class="edit" id="mobile"><?php echo $mobile; ?></td>
</tr>
<tr>
<td class="table_label">公司名称</td>
<td class="edit" id="company"><?php echo $company; ?></td>
<td class="table_label">电子邮箱</td>
<td class="edit" id="email"><?php echo $email; ?></td>
</tr>
<tr>
<td class="table_label">潜在客户来源</td>
<td class="edit_select" id="source"><?php echo $source; ?></td>
<td class="table_label">网站</td>
<td class="edit" id="web"><?php echo $web; ?></td>
</tr>
<tr>
<td class="table_label">职位</td>
<td class="edit" id="job"><?php echo $job; ?></td>
<td class="table_label">修改时间</td>
<td id="modifiedtime"><?php echo $modifiedtime; ?></td>
</tr>
</tbody>
</table>
</div>

</body>
</html>

sava.php代码

代码如下

复制代码

<?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 "数据出错";
}
}
?>

例下载地址:http://file.zzzyk.com/download/2013/05/16/3788_72817.rar

补充：Php教程,Php应用