|
|
转自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'); |
|
QQ群⑧：
窥视卡
雷达卡
发表于 2017-3-24 12:45:04
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡