该实例是在上一个工程的基础上做的:
步骤1.新建html文件---JqueryEdit.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JqueryEdit.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/edit.css">
<script type="text/javascript" src="jslib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jslib/jqueryedit.js"></script>
</head>
<body>
<!-- 让表中的数据点击可以修改 -->
<table>
<tbody>
<tr>
<td>123123</td><td>456456</td>
</tr>
</tbody>
</table>
</body>
</html>
步骤2.新建js文件---jqueryedit.js
//在页面装载时,让所有的td都拥有一个点击事件
$(document).ready(function(){
//找到所有的td节点
var tds = $("td");
//给所有的td节点增加点击事件
tds.click(tdclick);
});
//td被点击的事件
function tdclick(){
//0.保存当前的td节点
var td = $(this);
//1.取出当前td中的文本内容保存起来
var text = td.text();
//2.清空td里面的内容
td.html("");//也可以用td.empty()
//3.建立一个文本框,也就是input的元素节点
var input = $("<input>");
//4.设置文本框的值是保存起来的文本内容
input.attr("value",text);
//4.5让文本框可以相应键盘按下并弹起的事件
input.keyup(function(event){
//0.获取当前用户按下的键值
//解决不同浏览器获取事件的差异
var myEvent = event || window.event;
var kcode = myEvent.keyCode;
//1.判断是否为回车键按下
if(kcode == 13){
var inputnode = $(this);
//2.保存当前文本框的内容
var inputtext = inputnode.val();
//3.清空td里面的内容
var tdNode = inputnode.parent();
//4.将保存的文本框的内容填充到td中
tdNode.html(inputtext);
//5.让td重新拥有点击事件
tdNode.click(tdclick);
}else if(kcode == 27){
//当用户按下Esc时,将返回原来的数据
var inputNode = $(this);
var tdNode = inputNode.parent();
tdNode.html(text);
tdNode.click(tdclick);
}
});
//5.将文本框加入到td中
td.append(input);
//5.5让文本框里面的文字被高亮选中
var inputdom = input.get(0);
inputdom.select();
//6.需要清除td上的点击事件
td.unbind("click");
}
步骤3.新建css文件---edit.css,实现了单线边框的表格
/*表格实现单线边框*/
table,td{
border-collapse: collapse;/*让相邻边框合并*/
border: 1px solid black;
}
然后运行http://localhost:8080/JqueryTrain/JqueryEdit.html即可!!!
分享到:
相关推荐
JQuery实现可编辑的表格.rar JQuery实现可编辑的表格.rarJQuery实现可编辑的表格.rar JQuery实现可编辑的表格.rar JQuery实现可编辑的表格.rar
一个Ajax动态可编辑的表格,仿Vista按钮风格,可选中表格的某一行进行编辑,可整体搜索表格内的数据,也可复制、删除表格中的对象,确实不错。
可以轻松实现可编辑表格,还可以自己通过AJAX同步更新到后台
使用Jquery实现可编辑的表格 并使用AJAX提交到服务器修改数据的实现代码。
完整可运行的用jquery开发的ajax各种实例包括(级联菜单,谷歌式搜索提示,可编辑表格页面无刷新切换等)
自己常用的js库和写的一个交互型可编辑表格: BaseJs库的一点源码: /** * 自定义javascript常用基础库 author zhang_jhai 创建时间 2010/04/10 最后修改时间 2010/05/03 * version 2.0 */ // Base库基础类 BaseJs ...
Grid AJAX多功能表格.NET版,基于jQuery实现,编译源项目可生成JqueryGrid.dll文件,这是本控件的核心文件,项目可运行于VS2005及以上版本。没有安装VS的朋友,可直接在ASP.NET环境下运行Default.aspx即可看到插件...
说实话, 我也是特别懒的人, 很早就想看看 Ext, 尤其是做一个实时编辑的带后台的表格例子, 一直没能深入, 今天抽时间深入看了看 Ext 的 EditorGrid,可编辑的表格控件,总算凑出来了个实时增删改的例子(不单独弹出添加...
Ajax 页面无刷新表格,完整支持表格编辑 姓名验证 增 删 改 查 源码带数据库 附件中可下载源码加数据库,下载前看自己是否需要 实现内容: 1.姓名无刷新检查 数据库中是否有同名的帐户 2.增 删 改 查 页面无刷新...
VS2008 编写 基于Jquey ajax 开发的表格控件 能够自定义表头,编辑、添加、删除、统计 数据全都是 json 格式 还能实现 在 表格里插入时间
完美表格。在此基础上可进行AJAX开发.可编辑选项包括下拉框和文本框等。动态添加行 删除行。tab键切换。回车键改变状态等。
利用Jquery和ajax技术实现了以下功能: 自动补全输入框 可编辑的表格 弹出菜单 动态股票信息 浮动窗口
关于表格的使用说明 2 画表格 2 表格数据的构造 2 ...可编辑表格的实现 10 对话框的使用 12 弹出窗口的使用 12 可伸缩的panel 14 EditGridPanel的构成、数据提交及后台接收 18 Ajax代码参考 21 Button的使用 21
自己常用的js库和写的一个交互型可编辑表格: new BaseJs.EditTable({ // 表对象 table : BaseJs.$("tab"), // 从第几行第几列开始可编辑 start : [2, 1], // 到哪一行哪一列结束编辑 不写默认所有,写一个...
实现ajax的效果,使用intellij进行开发,包括类似百度输入部分词后自动从后台获取相关词语,可编辑的表格,菜单,自制窗口等。
本资源采用假分页技术,使用AJAX发送异步请求动态更新页面,实例中还可涉及JSON、可编辑表格的一些应用。
内容索引:脚本资源,Ajax/JavaScript,Ajax,动态表格,仿Vista 一个Ajax动态可编辑的表格,仿Vista按钮风格,可选中表格的某一行进行编辑,可整体搜索表格内的数据,也可复制、删除表格中的对象,确实不错。
这是一个AJAX+JS制作的一些效果图.有可编辑的表格,弹出框等..方便自己,方便别人