php可编辑表格

依然饭跑跑 · 发表于 2017-3-24 12:45:04

　　转自kongzimengsheng

编号	姓名	年龄	性别	邮箱
1	kaka	18	Boy	kaka@sina.cn
2	Jerry	17	Girl	Jerry@yahoo.cn

　　

index.php

<?php
header("Content-Type:text/html;charset=utf-8");
$mysqli = mysql_connect("localhost","root","")or die("exit");
mysql_select_db("demo");
?>
<html>
<head>
<title>可编辑表格</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<style type="text/css">
body{
font-size:12px;
background:#eee;
text-align:center;
}
table{
width:600px;
border:1px solid #050;
border-collapse:collapse;
}
tr,td{
border:1px solid #050;
width:120px;
}
</style>
</head>
<body>
<table>
<tr>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>邮箱</td>
</tr>
<?php
$sql = "SELECT id,name,age,sex,email from users ";
$result  = mysql_query($sql)or die(mysql_error());
while($row = mysql_fetch_array($result)){
?>
<tr>
<td class="id"><?php echo $row['id']?></td>
<td><?php echo $row['name']?></td>
<td><?php echo $row['age']?></td>
<td><?php echo $row['sex']?></td>
<td><?php echo $row['email']?></td>
</tr>
<?php
}
mysql_close($mysqli);
?>
</table>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
$(function(){
//奇数行变色
$("tr:even").css("background-color","#ffff99");
//不存在id的行加click事件
$("tr td:not(.id)").click(function(){
//alert($(this).text());
if($(this).children('input').length > 0)
return;
//取现表格中原有的内容
var data = $(this).text();
//将内容设置为空
$(this).html("");
//
//保留编辑表格
var td =  $(this);
//创建一个文本输入框
var input = $("<input type='text' >");
//将单元格的内容复制到input 文件框中
input.val(data);
//input 背景设定
input.css("background-color",$(this).css("background-color"));
input.css("border-width","0px");
input.css("width",$(this).css("width"));
//在表格中放一个input表单 $(this) 单元格
input.appendTo($(this));
//表单放入表格后触发焦点事件
input.trigger("focus");
//全选内容
input.trigger("select");

//-----------------------------
//添加键盘事件
input.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:a,email:e}
$.post("save.php",{id:i,name:n,age:a,sex:s,email:e},function(data){
alert(data);
});
});
});
});
</script>
</body>
</html>

　　

save.php

<?php
header("Content-Type:text/html;charset=utf-8");
$mysqli = mysql_connect("localhost","root","")or die("exit");
mysql_select_db("demo");
$sql = "update users set name = '{$_POST["name"]}' ,age = '{$_POST["age"]}',sex='{$_POST["sex"]}' ,email='{$_POST["email"]}' where id = '{$_POST["id"]}'";
//echo $sql;
$rs = mysql_query($sql);
if($rs){
echo "修改成功";
}else{
echo "修改失败";
}
mysql_close($mysqli);

　　

数据表

CREATE DATABASE demo DEFAULT CHARACTER SET UTF8;
CREATE TABLE `users` (
`id` int(11) NOT NULL,
`name` varchar(20) NOT NULL,
`age` int(11) NOT NULL,
`sex` varchar(10) NOT NULL,
`email` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `users` VALUES ('1', 'kaka', '18', 'Boy', 'kaka@sina.cn');
INSERT INTO `users` VALUES ('2', 'Jerry', '17', 'Girl', 'Jerry@yahoo.cn');

账号		自动登录	找回密码
密码			立即注册

c++ size_t 和 int 的区别

HERE 使用 AWS EF 和 JFrog Artifactory 打

C++ 指针大全：从基础到进阶，一篇快速上手

wirelessnetview好用的无线分析工具

Red Hat RHCE 8 (EX294) Cert Guide

亿图图示专家(EDraw Max) V7.9 中文破解版

zabbix3.4.1安装部署+微信推送信息+大屏显

[经验分享] php可编辑表格

浏览过的版块

扫码加入运维网微信交流群