基于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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
JS实现简单的点赞与踩功能示例
Dec 05 Javascript
微信小程序实现展示评分结果功能
Feb 15 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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
追求程序速度,而不是编程的速度
2008/04/23 PHP
PHP数据过滤的方法
2013/10/30 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
python实现根据图标提取分类应用程序实例
2014/09/28 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
军校大学生个人的自我评价
2014/02/17 职场文书
先进党员事迹材料
2014/12/24 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python