客户要求后台直接点击修改数据，使用jquery可以很容易实现，不过过程中还不是那么顺利，调试的过程中，发现要引入js脚本，必须使用type="text/javascript"而不是language="javascript"或者type="javascript"。
1.这里为了方便演示，就静态的显示数据了；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery实现可编辑的表格</title>
<link href="editTable.css" rel="stylesheet" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr>
<tr>
<td >1235467</td>
<td >987654321</td>
<td >987654321</td>
<td >123546789</td>
<td > 987654321</td>
</tr>
<tr>
<td >12354678</td>
<td >987654321</td>
<td >987654321</td>
<td >123546789</td>
<td > 987654321</td>
</tr>
<tr>
<td >123546789</td>
<td >987654321</td>
<td >987654321</td>
<td >123546789</td>
<td > 987654321</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
$(function(){ //相当于在页面中的body标签加上onload事件
//找到所有的td节点
var tds=$("td");
//给所有的td添加点击事件
tds.click(function(){
//获得当前点击的对象
var td=$(this);
//取出当前td的文本内容保存起来
var oldText=td.text();
//建立一个文本框，设置文本框的值为保存的值
var input=$("<input type='text' value='"+oldText+"'/>");
//将当前td对象内容设置为input
td.html(input);
//设置文本框的点击事件失效
input.click(function(){
return false;
});
//设置文本框的样式
input.css("border-width","0");
input.css("font-size","16px");
input.css("text-align","center");
//设置文本框宽度等于td的宽度
input.width(td.width());
//当文本框得到焦点时触发全选事件
input.trigger("focus").trigger("select");
//当文本框失去焦点时重新变为文本
input.blur(function(){
var input_blur=$(this);
//保存当前文本框的内容
var newText=input_blur.val();
td.html(newText);
});
//响应键盘事件
input.keyup(function(event){
// 获取键值
var keyEvent=event || window.event;
var key=keyEvent.keyCode;
//获得当前对象
var input_blur=$(this);
switch(key)
{
case 13://按下回车键，保存当前文本框的内容
var newText=input_blur.val();
td.html(newText);
var tdchs = td.parent("tr").children("td");
var i = tdchs.eq(0).text();
var c = td.attr("name");
$.post("save.asp?id="+i+"&column="+c+"&value="+newText,null,function(data){
alert(data);
});
break;
case 27://按下esc键，取消修改，把文本框变成文本
td.html(oldText);
break;
}
});
});
});
</script>
2.更新到数据库save.asp
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8" />
<TITLE>编辑通讯录</TITLE>
<link rel="stylesheet" href="Images/CssAdmin.css">
<script type="text/javascript" src="../Script/Admin.js"></script>
</HEAD>
<!--#include file="../Include/Const.asp" -->
<!--#include file="../Include/ConnSiteData.asp" -->
<BODY>
<%
dim id,col,val
id = Request.QueryString("id")
col = Request.QueryString("column")
val = Request.QueryString("value")
dim rs
set rs = server.createobject("adodb.recordset")
sql="select * from Ameav_Contact where ID = "&id
rs.open sql,conn,1,3
rs(col) = val
rs.update
rs.close
set rs=nothing
response.write "updated"
%>
</body>
</html>
分享到：
相关推荐
在“jquery可编辑表格”这个主题中，我们将深入探讨如何使用jQuery来创建和管理用户可编辑的表格，这对于数据输入和展示场景非常实用。jQuery的选择器和常用方法是实现这一目标的关键。 首先，jQuery选择器是其强大...
首先，GridView是ASP.NET Web Forms中的一种强大控件，用于显示和编辑表格数据。它可以动态地从数据库或其他数据源绑定数据，并提供多种内置功能，如分页、排序、过滤和编辑。在本例中，GridView被扩展以实现树形...
例如，可以使用EasyUI的表格组件展示数据库中的数据，通过Ajax异步请求更新数据，实现无刷新的数据加载和编辑。同时，对话框组件可用于创建弹出窗口，如添加或编辑记录，而菜单组件则可以创建导航菜单，增强用户体验...
TreeGrid是一种结合了树形结构和表格数据展示的控件，它可以将层次结构的数据以展开/折叠的方式显示，同时保持了表格的可操作性。 GridView是ASP.NET中常用的一种数据绑定控件，用于显示来自数据库或其他数据源的...
例如，Windows Forms中的DataGridView，ASP.NET中的GridView，以及JavaScript库如jQuery UI或AngularJS中的ngGrid，它们都提供了可编辑的特性。 编辑功能通常包括单元格级别的编辑、行级别的编辑和批量编辑等多种...
根据提供的文件信息，我们可以了解到一个关于如何利用jQuery实现点击页面上的文字内容，使其变为可编辑状态，并将修改后的内容保存到数据库的IT知识点。 首先，知识点涵盖的标题明确指出是“jquery实现点击文字可...
**jQuery EasyUI与ASP.NET整合应用详解** 在Web开发领域，jQuery EasyUI和ASP.NET的结合使用能够快速构建出功能丰富的交互式用户界面。本文将深入解析如何利用这两个技术进行项目开发，尤其适合初学者快速掌握系统...
- **更新（Update）**: 当用户编辑表格中的数据并保存时，FlexiGrid将更新的数据发送到后台，后台更新数据库记录。 - **删除（Delete）**: 用户选择要删除的行，FlexiGrid发送包含该行ID的请求，后台根据ID删除...
开发者可能通过ASP.NET MVC5后端处理数据，如从数据库查询、操作数据，然后返回到前端。前端使用ExtJS6的Grid组件展示这些数据，创建一个动态、可交互的表格。用户可以通过这个表格进行筛选、排序，甚至编辑数据，而...
在本文中，我们将深入探讨如何在ASP.NET应用中调用jQuery的插件FlexGrid，并结合Access数据库进行数据操作。当然，这个过程同样适用于SQL Server数据库的集成。FlexGrid是一款功能强大的表格控件，它提供了丰富的...
它允许开发者将表格数据与后台数据库紧密连接，通过Ajax实现动态加载，减少了页面刷新，提升了用户体验。表格中的每一列都可以独立设置排序方式，用户只需点击列头，即可实现升序或降序排列。同时，Flexigrid内置了...
4. **数据交互**：当用户完成编辑后，将富文本内容通过AJAX发送到服务器，ASP.NET后台接收并保存在数据库中。 三、应用FCKEditor在线文本编辑器 FCKEditor是一款开源的ASP.NET在线文本编辑器，它提供了丰富的功能和...
ASP.NET MVC5提供了丰富的功能，如路由、身份验证、授权、过滤器等，使开发者能够构建可维护、可测试的Web应用。 **Entity Framework 6 (EF6)** Entity Framework（EF）是微软的ORM（对象关系映射）工具，用于简化...
3. **表格（Grid）**：提供数据展示和管理的表格组件，支持分页、排序、过滤、行选择、编辑等功能，可以与后台数据库进行无缝对接。 4. **表单（Form）**：包含了各种输入控件，如文本框、下拉框、复选框、单选按钮...
- **ADO.NET**: 通过 ADO.NET，开发者可以直接操作数据库，获取或更新数据，为 EasyUI 组件提供数据源。 - **Entity Framework**: 更高级的数据访问技术，提供对象关系映射，简化了数据库操作，使代码更易于维护和...
包括源代码、数据库文档、数据库创建SQL脚本。一套基于ASP.NET MVC+EF6+Bootstrap开发出来的框架源代码！ 采用主流框架，容易上手，简单易学，学习成本低。可完全实现二次开发、基本满足80%项目需求。 可以帮助...
在这个项目中，我们可以期待看到如何使用数据库（可能是SQL Server或SQLite）存储这种关系，并通过ASP.NET的后台代码（C#或VB.NET）处理数据操作，如查询、插入和更新。同时，前端将使用ASP.NET的服务器控件（如...
- **可扩展性**：可以通过编写自定义脚本扩展其功能，如添加编辑、删除等操作。 - **响应式设计**：适应不同设备和屏幕尺寸，确保在桌面和移动设备上都有良好的用户体验。 2. **工作原理** - **前端**：jQuery ...
EasyUI是一个基于jQuery的UI库，提供了丰富的组件，如表格、对话框、菜单、表单等，用于快速构建美观且响应式的用户界面。在我们的项目中，EasyUI将被用来创建交互式的权限管理界面，如用户列表、角色编辑和权限分配...
jqGrid 是一个强大的 jQuery 插件，用于在网页上创建、读取、更新和删除（CRUD）数据，提供网格视图。它以其高度可定制性、灵活性和丰富的功能而闻名。在 ASP.NET MVC 4.0 框架中集成 jqGrid，可以构建功能丰富的...