- 浏览: 239503 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
xmwjfid:
写的不错,就是有个疑问groupSize 这个用来干什么?
jQuery Ajax分页(pagination.js)分页插件 (转载) -
GRACEACT:
Thanks.对我很有帮助。
使用Java组件itext 生成pdf的介绍 -
xianzi_2008:
jQuery Ajax分页(pagination.js)分页插件 (转载) -
xiaotao.2010:
Demo a=new Demo()
{ ...
匿名类 -
system1029hq:
jQuery Ajax分页(pagination.js)分页插件 (转载)
今天来演示一个用jquery完成的效果:可编辑的表格。
1.先写一个含有表格的页面jqueryEdit.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jquery示例3:可修改的表格</title>
<META NAME="Author" CONTENT="King_wangyao">
<META NAME="Description" CONTENT="jQuery示例:可修改的表格">
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/jqueryEditUseBlur.js"></script>
</head>
<body>
<table cellpadding="0" cellspacing="1" border="1" style="width: 60%;">
<tr>
<td>用户名:</td>
<td>King_wangyao</td>
</tr>
<tr>
<td>昵称:</td>
<td>偽僾訫誶</td>
</tr>
<tr>
<td>自我介绍:</td>
<td>家穷人丑一米四九,小学文化农村户口,破屋三间薄田一亩,冷锅热灶老婆没有,一年四季药不离口,今日这里广征女友,革命道路并肩携手。</td>
</tr>
</table>
</body>
</html>
2.书写一个javaScript脚本文件,来完成表格的可编辑效果,jqueryEdit.js:
这个文件中,当输入框修改完后是按回车键提交的,下面一个文件是通过鼠标相对文本框失去焦点来实现提交的,本人认为下面第二种方法比较合乎实际一点。
//在页面加载的时候,让所有的td有一个点击事件
$(document).ready(function(){
var tdNods = $("td");
tdNods.click(tdClick);
});
//td点击触发的函数
function tdClick(){
//1.取出当前td里面的文本内容
var td = $(this);
var tdText = td.text();
//2.清空td里面的文本内容
td.html(""); //也可以使用td.empty();
//3.建立一个输入框,也就是input标签
var input = $("<input>");
//4.将输入框的内容设为刚才保存的td里面的文本内容
input.attr("value",tdText);
//4.5.让文本框能够响应键盘按下的keyup事件,主要是用于处理回车确认
input.keyup(function(event){
//1.获取当前用户按下的键值
//解决不同浏览器获得事件对象的差异,
// IE用自动提供window.event,而其他浏览器必须显示的提供,即在方法参数中加上event
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;
//2.判断是否是回车按下
if(keyCode == 13){
//2.保存当前输入框的内容
var input = $(this);
var inputText = input.val();//这个地方不能用text(),而是用val()
//3.清空td的内容,即去掉输入框
var td = input.parent("td");
td.empty();
//4.将保存的文本内容填充到td中去
td.html(inputText);
//5.让td重新拥有点击事件
td.click(tdClick);
}
});
//5.将输入框加到td中
td.append(input); //也可以用input.appendTo(td);
//5.5 让文本框中的文字被高亮选中
//需要将jquery对象转化为DOM对象
var inputDom = input.get(0);
inputDom.select();
//6.需要移除td上的点击事件
td.unbind("click");
};
下面这个脚本文件是通过鼠标相对文本框失去焦点来实现提交的jqueryEditUseBlur.js:
下面用红色显示的是与上面文件不一样的地方。
//在页面加载时候,就使td节点具有click点击能力
$(document).ready(function(){
var tdNods = $("td");
tdNods.click(tdClick);
});
//td的点击事件
function tdClick(){
//将td的文本内容保存
var td = $(this);
var tdText = td.text();
//将td的内容清空
td.empty();
//新建一个输入框
var input = $("<input>");
//将保存的文本内容赋值给输入框
input.attr("value",tdText);
//将输入框添加到td中
td.append(input);
//给输入框注册事件,当失去焦点时就可以将文本保存起来
input.blur(function(){
//将输入框的文本保存
var input = $(this);
var inputText = input.val();
//将td的内容,即输入框去掉,然后给td赋值
var td = input.parent("td");
td.html(inputText);
//让td重新拥有点击事件
td.click(tdClick);
});
//将输入框中的文本高亮选中
//将jquery对象转化为DOM对象
var inputDom = input.get(0);
inputDom.select();
//将td的点击事件移除
td.unbind("click");
}
3.对上面的效果进行进一步的修改,使之更加人性化(红色字体是修改过的地方)
通过修改使你在修改的过程中文本的内容可以按Esc键撤销还原到修改前的状态
//在页面加载时候,就使td节点具有click点击能力
$(document).ready(function(){
var tdNods = $("td");
tdNods.click(tdClick);
});
//td的点击事件
function tdClick(){
//将td的文本内容保存
var td = $(this);
var tdText = td.text();
//将td的内容清空
td.empty();
//新建一个输入框
var input = $("<input>");
//将保存的文本内容赋值给输入框
input.attr("value",tdText);
//将输入框添加到td中
td.append(input);
//给输入框注册事件,当失去焦点时就可以将文本保存起来
input.blur(function(){
//将输入框的文本保存
var input = $(this);
var inputText = input.val();
//将td的内容,即输入框去掉,然后给td赋值
var td = input.parent("td");
td.html(inputText);
//让td重新拥有点击事件
td.click(tdClick);
});
input.keyup(function(event){
//1.获取当前用户按下的键值
//解决不同浏览器获得事件对象的差异,
// IE用自动提供window.event,而其他浏览器必须显示的提供,即在方法参数中加上event
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;
//2.判断是否是ESC键按下
if(keyCode == 27){
//将input输入框的值还原成修改之前的值
input.val(tdText);
}
});
//将输入框中的文本高亮选中
//将jquery对象转化为DOM对象
var inputDom = input.get(0);
inputDom.select();
//将td的点击事件移除
td.unbind("click");
}
发表评论
-
HTTP状态码及其含义
2011-06-07 14:23 1216作者:King_wangyao 来自:Internet 导 ... -
javaScript表单验证大全
2011-05-23 11:57 1081一、基本验证1.1. 长度限制<script> ... -
107个JS基础,Web程序员开发必备
2011-05-23 11:49 9271.document.write(""); ... -
JQUERY 对象与DOM对象之转换
2011-05-03 16:41 1199转换案例: 获取JQUERY对象的方法 var jqueryO ... -
摘抄: 判断cookie是否开启
2011-04-11 00:37 1023方法一: 无论何时你在两页之间,有一个非常简单可靠的方 ... -
在js类中 setTimeout() 和 setInterval() 的使用方法详解
2011-04-11 00:34 1209setTimeout(表达式,延迟时间); 单位:m ... -
jQuery:一次失败的优化尝试
2011-04-10 14:30 925jQuery:一次失败的优化尝试 我经常抱怨jQ ... -
JS截取字符串
2011-04-10 11:34 1111使用 substring()或者slice() 函数:sp ... -
jQuery获取Select选择的Text和 Value(转)
2011-04-09 13:45 1564jQuery获取Select选择的Text ... -
jQuery之ajax post篇dff
2011-04-07 22:38 1201jQuery真的是一个不错的东西,感觉比prototype处理 ... -
jQuery Ajax分页(pagination.js)分页插件 (转载)
2011-04-07 22:35 2993pagination.js /** * jQuery分 ... -
javascript 技巧
2011-04-07 00:02 9691,将变量转换为字符串的办法。 var a=" ... -
十一种刷新按钮的方法
2011-04-06 13:29 1024十一种刷新按钮的方法: <input type=butt ... -
HTML a 标签的 target 属性
2011-04-06 13:23 1349HTML <a> 标签的 target 属性 定 ... -
JS实现刷新iframe的方法
2011-04-06 13:16 1317<iframe src="1.htm&qu ... -
“HTTP”协议
2011-04-05 20:15 2520打开“HTTP”协议 仔细 ... -
常用表单验证函数
2011-04-05 01:25 1163******函数说明****** * * isEmail( ... -
网页中嵌入脚本有两种方式
2011-04-05 01:21 1239网页中嵌入脚本有两种方式: 1、使用<Script> ... -
网页制作之HTML基础知识
2011-04-05 00:09 1059网页制作之HTML基础知识 作者:king_wangyao ... -
HTML-MARQUEE基本语法
2011-04-05 00:07 1021基本语法 <marquee> ... </ ...
相关推荐
总结一下,jQuery实现可编辑表格主要涉及以下步骤: 1. 创建带有输入框的HTML表格结构。 2. 使用CSS定制样式,使输入框融入表格。 3. 使用jQuery监听事件,实现表格单元格的编辑和保存功能。 这个简单的示例展示了...
在网页开发中,jQuery 是一个...综上所述,利用 jQuery 实现可编辑表格涉及到 HTML 结构、jQuery 事件监听、DOM 操作以及可能的数据交互。通过结合这些技术,您可以创建出一个功能丰富的、用户友好的可编辑表格组件。
总的来说,利用jQuery实现可编辑表格是一项实用的技能,它使开发者能够快速构建动态、交互性强的网页应用。通过结合HTML5的新特性、jQuery的强大功能以及适当的前端框架,我们可以创建出满足各种需求的可编辑表格,...
这篇名为“JQuery实现可编辑表格”的博客文章可能深入探讨了如何利用jQuery的功能来创建一个用户可以编辑的表格。在网页设计中,这种功能常用于数据输入或管理应用程序,允许用户直接在表格内修改数据而无需跳转到...
总之,使用jQuery实现可编辑表格是一项实用的技术,它允许用户直接在网页上修改数据,提高了交互性和数据管理的效率。通过学习和实践,你可以根据实际需求进行定制,创建出更加复杂的可编辑表格应用。
通过以上步骤,我们可以构建出一个功能完善的、基于jQuery的可编辑表格。需要注意的是,虽然jQuery简化了许多任务,但现代前端框架如React、Vue或Angular提供了更强大的状态管理和组件化功能,可能更适合处理复杂的...
在网页开发中,jQuery是一个非常强大的...总之,使用jQuery实现可编辑表格涉及多个方面,包括DOM操作、事件处理、数据管理以及用户交互优化。通过熟练掌握这些技巧,你可以创建出功能丰富且易于使用的Web应用程序。
本示例“基于jquery的可编辑表格实现代码”是关于如何利用jQuery创建一个功能丰富的交互式表格,允许用户双击单元格(TD元素)进行编辑,编辑完成后,数据会自动更新回原单元格。以下将详细介绍这一技术实现的关键...
**jQuery可编辑表格详解** 在Web开发中,表格是一种常用的数据展示方式,而jQuery可编辑表格则让用户体验更上一层楼。它允许用户直接在表格内进行数据编辑,无需跳转页面或刷新,大大提升了交互性和效率。jQuery库...
在这个“jquery可编辑表格.zip”压缩包中,我们关注的是如何使用jQuery来实现一个可编辑的表格功能。这样的功能对于数据展示和管理来说非常实用,尤其是在需要用户即时更新或输入数据的场景下。 首先,让我们详细...
本人前端小白,因为项目需求,需要动态编辑表格,但是layui的编辑表格只适合 【有数据】修改功能用,并不适合【无数据】新增的功能使用,所以本人研究了几日,才写出了这么一个 无数据绑定,当然也可以自行绑定数据...
通过以上步骤,我们可以创建一个功能完备、用户体验良好的可编辑表格。JQuery的强大功能使得这个过程变得相对简单,但要注意在实际项目中还需要考虑代码组织、模块化和测试等多方面因素,以确保代码的可维护性和稳定...
"jquery可编辑表格插件"就是基于jQuery的一种工具,旨在为网页中的表格提供动态编辑功能,使得用户可以直接在表格中进行数据的增删改查,极大地提升了交互性和用户体验。这种插件在数据展示和管理场景中尤其实用,...
<title>jQuery 可编辑表格 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid #ddd; padding: 8px;...
总结来说,利用jQuery创建可编辑表格涉及的关键技术包括DOM操作、事件绑定、数据交互以及用户体验优化。这样的功能增强了用户与网页的互动性,使得数据管理更为直观和高效。通过结合HTML、CSS和jQuery,开发者可以...
总之,利用jQuery实现可编辑表格是一项实用的技能,能够提升网页的交互性。通过理解HTML基础、jQuery选择器和事件处理,以及HTML5的`contenteditable`属性,开发者可以轻松地创建自己的可编辑表格功能。在实际项目中...
jquery可编辑表格代码实现
对于复杂的编辑需求,可以引入插件如DataTables,它提供了丰富的可编辑表格功能,并集成了排序、过滤和搜索等特性。 总之,利用JQuery实现可编辑的表格,不仅提升了用户交互性,还增强了网页的数据管理能力。在实际...