基于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 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
vue登录路由验证的实现
Dec 13 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 Javascript
JavaScript ES6的函数拓展
Jan 18 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
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
监理员的岗位职责
2013/11/13 职场文书
小区消防演习方案
2014/02/21 职场文书
空乘英文求职信
2014/04/13 职场文书
作风建设年活动总结
2014/08/27 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
旷课检讨书范文
2014/10/30 职场文书
优秀党员事迹材料
2014/12/18 职场文书
运动会加油稿
2015/07/22 职场文书
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技
mysql的单列多值存储实例详解
2022/04/05 MySQL