转自kongzimengsheng
|
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');
相关推荐
标题“php可编辑表格.zip”指的是一个包含PHP代码和可能的HTML、CSS及JavaScript资源的压缩文件，用于创建一个用户可以交互编辑的表格。在Web开发中，这种功能常用于数据管理和更新，例如数据库记录的在线编辑。让...
这个资源，"在线编辑表格 html格式可编辑表格 javascript编写"，提供了一个使用HTML和JavaScript实现的简单可编辑表格。JavaScript是一种强大的客户端脚本语言，常用于增强网页的动态功能，而HTML则是网页内容的基础...
1. **实时编辑**：当用户点击表格中的某个单元格时，jQuery可以通过添加CSS类或属性改变该单元格的样式，使其变为可编辑状态。例如，可以添加一个`contenteditable`属性使单元格变为文本输入框。 2. **事件监听**：...
本教程主要探讨如何利用jQuery、PHP和jeditable插件实现在网页上实时编辑表格内容的功能，包括下拉菜单、日历等丰富的表单元素。以下是详细的知识点解析： 1. **jQuery**：jQuery是一个强大的JavaScript库，简化了...
在创建可编辑表格时，这些功能尤为重要，因为我们需要动态地改变表格单元格（`<td>`）的内容，响应用户的编辑操作。 1. **表格结构**：创建一个基本的HTML表格，包括表头（`<thead>`）和数据区域（`<tbody>`）。每...
总结，实现一个可编辑表格（表单）需要结合HTML、CSS、JavaScript以及可能的前端框架，与后端配合完成数据的提交和处理。通过这样的方式，我们可以创建出一个功能完备、用户体验良好的网页表单系统。
在本项目中，我们主要探讨如何使用JavaScript创建一个可编辑的网页表格，并通过PHP与MySQL数据库进行交互，实现数据的保存和读取。这是一项基本的前端与后端结合的应用，对于网页应用开发来说是非常基础且重要的技能...
标题中的“基于ThinkPHP后台可编辑表格”是指利用ThinkPHP框架开发的一种后台管理系统，其中包含了一个可以编辑的表格功能。这种功能通常用于数据管理和维护，允许用户在后台直接查看、添加、修改或删除数据，提高了...
"jquery php+mysql 表格双击可编辑,表单失去焦点自动提交保存数据"是一个典型的例子，展示了如何结合前端技术和后端技术实现高效的数据管理。以下是这个项目涉及的关键知识点： 1. **jQuery**：jQuery是一个强大的...
【标题】"jQuery可编辑表格插件"是一个用于在网页上创建交互式表格的...通过理解并利用压缩包中的各个文件，开发者不仅可以快速实现一个功能完备的可编辑表格，还能根据需要进行扩展和定制，以适应多样化的应用场景。
在本文中，我们将深入探讨如何使用jQuery、PHP和jeditable插件来实现实时编辑表格字段内容的功能。这种技术在现代Web应用中非常常见，它提供了用户友好的交互体验，使得数据更新更加高效。 首先，jQuery是一个强大...
在开始编辑表格之前，我们需要了解 jqGrid 的基本结构和配置。首先，引入 jqGrid 的必需库，包括 jQuery、jQuery UI CSS 文件、jqGrid JS 文件和相应的主题 CSS 文件。例如： ```html <script src="js/jquery.js">...
**PHP+Ajax+Mysql+jeditable无刷新编辑表格** 在Web开发中，提供用户友好的交互体验至关重要。本文将深入探讨如何使用PHP、Ajax、MySQL和jEditable技术实现一个无刷新编辑表格的功能，从而提高用户体验并减少服务器...
**jQuery可编辑表格详解** 在Web开发中，表格是一种常用的数据展示方式，而jQuery可编辑表格则让用户体验更上一层楼。它允许用户直接在表格内进行数据编辑，无需跳转页面或刷新，大大提升了交互性和效率。jQuery库...
1. **添加表格**：在Word文档中，表格是一种常见且强大的布局工具，可用于展示数据或组织信息。PHPWord提供了添加表格的方法，例如`$section->addTable()`，可以指定列数、行数，以及单元格的样式。在最新的整合中，...
table.php 代码如下: <?php header(“Content-Type:text/html;charset=utf-8”); $mysqli=new MySQLi(“localhost”...可编辑表格</title> <link rel=”stylesheet” type=”text/css” href=”style.css”
PHPGRID不仅具有数据添加编辑删除的基本功能，还具有表单自动生成，排序，分页，查询，权限设定，缓存的功能，而且这些功能是可定制的。 对于特殊或则复杂的业务的需求，您只需编写少量的代码来继承于PHPGRID。
至于"插件"，则意味着这是一个独立的、可复用的工具，开发者可以将其轻松引入到自己的项目中，而不必从头开始编写树形编辑功能。 在压缩包中，"tree"可能是源代码文件、示例文件或者相关的资源文件，它们包含了实现...
可编辑的下拉框 既可以编辑，又可以下拉选择 很不错的