基于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 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
轮播的简单实现方法
Jul 28 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
vue-父子组件和ref实例详解
Nov 10 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 Javascript
vue选项卡切换的实现案例
Apr 11 Vue.js
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 CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
浅谈js中的this问题
2017/08/31 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
原生js实现分页效果
2020/09/23 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
python getopt 参数处理小示例
2009/06/09 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
django缓存配置的几种方法详解
2018/07/16 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
python怎么自定义捕获错误
2020/06/29 Python
python中remove函数的踩坑记录
2021/01/04 Python
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
公益广告标语
2014/06/19 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
大学生十八大感想
2015/08/11 职场文书
《鲸》教学反思
2016/02/23 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
Python日志模块logging用法
2022/06/05 Python