基于PHP+Jquery制作的可编辑的表格的代码


Posted in Javascript onApril 10, 2011

table.php

<?php 
header("Content-Type:text/html;charset=utf-8"); 
$mysqli=new MySQLi("localhost","root","123456","xiaoqiangdb"); 
if(mysqli_connect_errno){ 
echo "连接数据库失败".mysqli_connect_error(); 
exit; 
} 
?> 
<html> 
<head> 
<title>可编辑表格</title> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script src="jquery-1.3.2.min.js"></script> 
<script src="table.js"></script> 
</head> 
<body> 
<?php 
$sql="select id,name,age,sex,email from users limit 0,20"; 
$result=$mysqli->query($sql); 
echo "<table>"; 
echo "<caption>可编辑表格</caption>"; 
echo "<tr>"; 
echo "<th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>邮箱</th>"; 
echo "</tr>"; 
while($row=$result->fetch_assoc()){ 
echo '<tr>'; 
echo '<td class="id">'.$row['id']'</td>'; 
echo '<td>'.$row['name']'</td>'; 
echo '<td>'.$row['age']'</td>'; 
echo '<td>'.$row['sex']'</td>'; 
echo '<td>'.$row['email']'</td>'; 
echo '</tr>'; 
} 
echo "</table>"; 
$mysqli->close(); 
?> 
</body> 
</html>

style.css
@charset "utf-8"; 
/* CSS Document */ 
body{ font-size:12px; background:#EEE; text-align:center;} 
table{ width:600px; border:1px solid #050; border-collapse:collapse;} 
th,td{ border:1px solid #050; width:120px;} 
th{ background:#282; color:white;}

table.js
// JavaScript Document 
$(function(){ 
$("tr:even").css("background-color","#ffff99"); 
$("tr td:not(.id)").click(function(){ 
if($(this).children('input').length > 0) 
return; 
//取出表格中原有的内容 
var data=$(this).text(); 
//将内容设置为空 
$(this).html(''); 
var td=$(this); 
//创建一个表格 
var inp=$('<input type="text">'); 
inp.val(data); 
inp.css("background-color",$(this).css("background-color")); 
inp.css("border-width","0px"); 
inp.css("width",$(this).css("width")); 
//在表格中放一个input表单 
inp.appendTo($(this)); 
//表单放入表格后触发焦点事件 
inp.trigger('focus'); 
//全选内容 
inp.trigger('select'); 
//添加键盘时间 
inp.keydown(function(event){ 
switch(event.keyCode){ 
case 13: 
td.html($(this).val()); 
//利用Ajax将数据传给服务器 
//获取一行所有的列对象 
var tds=td.parent("tr").children("td"); 
var i=tds.eq(0).text(); 
var n=tds.eq(1).text(); 
var a=tds.eq(2).text(); 
var s=tds.eq(3).text(); 
var e=tds.eq(4).text(); 
//var user={id:i,name:n,age:a,sex:s,email:e} 
$.post("save.php",{id:i,name:n,age:a,sex:s,email:e},function(data){ 
alert(data); 
}); 
break; 
case 27: 
td.html(data); 
break; 
} 
}).blur(function(){ 
td.html($(this).val()); 
//利用Ajax将数据传给服务器 
//获取一行所有的列对象 
var tds=td.parent("tr").children("td"); 
var i=tds.eq(0).text(); 
var n=tds.eq(1).text(); 
var a=tds.eq(2).text(); 
var s=tds.eq(3).text(); 
var e=tds.eq(4).text(); 
//var user={id:i,name:n,age:a,sex:s,email:e} 
$.post("save.php",{id:i,name:n,age:a,sex:s,email:e},function(data){ 
alert(data); 
}); 
}); 
}); 
});

save.php
<?php 
header("Content-Type:text/html;charset=utf-8"); 
$mysqli=new MySQLi("localhost","root","123456","xiaoqiangdb"); 
if(mysqli_connect_errno){ 
echo "连接数据库失败".mysqli_connect_error(); 
exit; 
} 
$sql="update users set name='{$_POST["name"]}',age='{$_POST["age"]}',sex='{$_POST["sex"]}',email='{$_POST["email"]}' where id='{$_POST["id"]}'"; 
$result=$mysqli->query($sql); 
if($result){ 
echo "修改成功"; 
}else{ 
echo "保存失败"; 
} 
$mysqli->close(); 
?>
Javascript 相关文章推荐
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
angular多语言配置详解
May 16 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 Javascript
JQuery优缺点分析说明
Apr 10 #Javascript
基于jquery的15款幻灯片插件
Apr 10 #Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 #Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
Apr 08 #Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 #Javascript
javascript学习笔记(五)正则表达式
Apr 08 #Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 #Javascript
You might like
php上传文件的增强函数
2010/07/21 PHP
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python之wxPython菜单使用详解
2014/09/28 Python
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
Django 反向生成url实例详解
2019/07/30 Python
Pytorch to(device)用法
2020/01/08 Python
python机器学习库xgboost的使用
2020/01/20 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
python怎么删除缓存文件
2020/07/19 Python
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
就业自荐书
2013/12/05 职场文书
校园报刊亭的创业计划书
2014/01/02 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
营销计划书范文
2015/01/17 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书