基于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 相关文章推荐
很可爱的输入框
Aug 03 Javascript
JavaScript下申明对象的几种方法小结
Oct 02 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
基于jQuery实现可编辑的表格
Dec 11 jQuery
node.js使用stream模块实现自定义流示例
Feb 13 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
smarty模板引擎之内建函数用法
2015/03/30 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
php中Snoopy类用法实例
2015/06/19 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
python实现局域网内实时通信代码
2019/12/22 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
pandas实现导出数据的四种方式
2020/12/13 Python
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
大学教师个人总结
2015/02/10 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python