基于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 相关文章推荐
关于可运行代码无法正常执行的使用说明
May 13 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
jQuery ajax应用总结
Jun 02 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
详解JavaScript常量定义
Jan 03 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 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本地服务器分享
2013/02/19 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
php实现图片添加水印功能
2014/02/13 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python异常和文件处理机制详解
2016/07/19 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
为什么使用接口?
2014/08/13 面试题
竞聘书模板
2014/03/31 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
商务英语求职信范文
2015/03/19 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
优秀创业计划书分享
2019/07/19 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
Python自动化实战之接口请求的实现
2022/05/30 Python