- 浏览: 721144 次
- 性别:
- 来自: 南宁
文章分类
最新评论
-
如果我爱上你的笑容:
牛腩老师讲的课很棒 目前新闻发系统学习中 `(*∩_∩*)′
64位win8.1系统安装intelhaxm -
k04110411:
jhlovett 写道牛哥,想问下 public void P ...
ASP.NET通过HTML的上传文件标签来上传文件 -
liuzhijie3:
我也留个脚印用到了,讲的不错
.NET中获取字符串的MD5码 -
han_yankun2009:
,楠老师不错呀
在一堆数中查询相加得某个数的组合 -
allstara609:
请问牛老师,datalist中如何去掉数字中多余的0?
去掉数字中多余的0(ASP.NET)
很久不上来写文章了,嘿嘿,最近在做一个简单的新闻发布系统,打算做好了以后出个视频的,呵呵,很久不录视频了,不知道家里的那破话筒还用不用得..还有那破机子顶不顶得住啊....唉..一个月1000块上下的工作...吃饭去300,坐公交去100,给外婆100,给奶奶100,给老妈100,还有300,要攒到何年何月才能买台2G内存,开VS08不卡的电脑啊...郁闷....
不说这么多了,这回给大家带来的是利用jQuery制作一个可编辑表格的WEB页面,大家应该用过Excel吧,里面的表格是可编辑的,点击任一个单元格,可向里面输入东西,按下回车后确认,如果是按下Esc键后就是取消,单元格中的内容会恢复到之前状态.
现在我们要把这个功能移殖到web页面上来,我们先来理一下思路:
① 点击单元格后可以输入,即是td的click事件处理函数里,让td的innerHTML的内容是一个input输入框
② 在input输入文字后按回车或Esc会触发相应的事件,即是在input的***事件中判断按下的键,然后做出相应的执行,这个***我们可以初步断定是keydown、keypress、keyup三种之一,至于用哪种后面再说.
③ 暂时想到这么多!
下面来具体的编写代码,首先先把HTML页面搭建好,HTML代码如下:
接下来先设置一下CSS样式,CSS代码如下:
在这里我们设置可点击修改的只是"新闻类别"这一列,所以我们要在这一列上加上个niu样式,并给他一个固定宽度,这样可去除一些界面上的不协调之类的...而且也方便我们用jQuery选择出这一列,我就直接把JS代码都贴出来,然后再说说要注意的问题.JS代码如下:
在这里我们通过jQuery的元素筛选功能,用children找出每一tr行中有.niu样式的单元格td,然后给td加上click事件,在触发的函数中先保存原来td中的文本,然后利用html方法把td中的内容变成一个input文本框,随后设置了一些input文本框的样式,以保持界面的美观,然后给文本框加上blur焦点失去事件,相当于回车确认,把文本框中输入的内容变成单元格td的内容,再加上keydown事件,进行按键处理,在这里我们使用keydown事件,因为经本人检测, keypress事件在某些浏览器上按键并不会产生按键代码, keyup好像也是一样,
之所以说好像,因为在测试的时候我的IETester出了问题,竟然不给我响应回车和Esc,一按就死了,重装了IETester也还是一样...
最后要说的是jQuery中获取按键代码可用event.keyCode和event.which这两种方法,经本人检测,如果使用event.which,在opera浏览器中检测不到Esc键的按键代码,因此在这里采用event.keyCode方式来获取.
最最后还要说的是我们还得给文本框的click点击事件返回false,要不然的话你点击单元格,里面蛮文本框了之后再点击文本框,触发完文本框的click事件后还会再触发文本框所处在的父结点,即单元格的click事件,这样会产生意想不到的麻烦.所以要给文本框的click点击事件返回false就行了.
还有忘了说了,在正式项目中用到这个功能的话,除了要获取文本框输入的内容,即修改后的内容,还得要获取当前行的某一列,即要获取id,这样才能通过唯一值id来更新数据库中相应的内容,在这里通过prev方法,即当前结点的前一个兄弟结点来获取.
最最最后还要说的一点,就是我在做新闻发布系统的时候用到了上面的这个功能,在实际的操作中想要回车后通过AJAX方式发送数据还有一点小问题,就是如果在当前ASPX页面中有按钮的话,按回车了会让触发ASPX的Page_Load事件,如何解决的话这个留待视频里再说!!!
上头有任务下来了...开始工作....忽忽悠悠又过一个上午....
不说这么多了,这回给大家带来的是利用jQuery制作一个可编辑表格的WEB页面,大家应该用过Excel吧,里面的表格是可编辑的,点击任一个单元格,可向里面输入东西,按下回车后确认,如果是按下Esc键后就是取消,单元格中的内容会恢复到之前状态.
现在我们要把这个功能移殖到web页面上来,我们先来理一下思路:
① 点击单元格后可以输入,即是td的click事件处理函数里,让td的innerHTML的内容是一个input输入框
② 在input输入文字后按回车或Esc会触发相应的事件,即是在input的***事件中判断按下的键,然后做出相应的执行,这个***我们可以初步断定是keydown、keypress、keyup三种之一,至于用哪种后面再说.
③ 暂时想到这么多!
下面来具体的编写代码,首先先把HTML页面搭建好,HTML代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>可以编辑的表格</title> <link href="css/edittable.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/edittable.js" type="text/javascript"></script> </head> <body> <table id="category"> <tr> <th>序号</th> <th>新闻类别</th> <th>删除</th> </tr> <tr> <td>1</td> <td class="niu">财经新闻</td> <td>删除</td> </tr> <tr> <td>2</td> <td class="niu">体育新闻</td> <td>删除</td> </tr> <tr> <td>3</td> <td class="niu">社会新闻</td> <td>删除</td> </tr> </table> </body> </html>
接下来先设置一下CSS样式,CSS代码如下:
* { margin: 0; padding: 0; } table { border: 1px solid #7BCB98; width: 300px; border-collapse: collapse; } th { border: 1px solid #7BCB98; background-color: #E9FDF1; } td { border: 1px solid #7BCB98; text-align:center; } .niu { width: 200px; }
在这里我们设置可点击修改的只是"新闻类别"这一列,所以我们要在这一列上加上个niu样式,并给他一个固定宽度,这样可去除一些界面上的不协调之类的...而且也方便我们用jQuery选择出这一列,我就直接把JS代码都贴出来,然后再说说要注意的问题.JS代码如下:
$(function() { $("tr").children(".niu").click(function() { var tdObj = $(this); var souText = tdObj.text(); // 原来的内容 var input = $("<input type='text' value='" + souText + "' />"); // 设置文本框的宽 input.width(tdObj.width()); // 设置文本框的点击事件 input.click(function() { return false; }); // 设置文本框的样式 input.css({ "border-width": 0 }); // 将文本框替换当前td的内容 tdObj.html(input); // 触发文本框的focus事件后再触发select事件 input.trigger("focus").trigger("select"); // 文件框的焦点失去事件, 把文本框中填写的内容变成 input.blur(function() { tdObj.html(input.val()); // 查找当前td的前一个td中的内容, 即当前行的序号 alert(tdObj.prev().text()); }); // 处理文本框中键盘按键事件, Enter 13确认,Esc 27取消 input.keydown(function(event) { var keyCode = event.keyCode; if (keyCode == 13) { // 按下回车 tdObj.html(input.val()); // 查找当前td的前一个td中的内容, 即当前行的序号 alert(tdObj.prev().text()); } if (keyCode == 27) { // 按下Esc tdObj.html(souText); } }); }); });
在这里我们通过jQuery的元素筛选功能,用children找出每一tr行中有.niu样式的单元格td,然后给td加上click事件,在触发的函数中先保存原来td中的文本,然后利用html方法把td中的内容变成一个input文本框,随后设置了一些input文本框的样式,以保持界面的美观,然后给文本框加上blur焦点失去事件,相当于回车确认,把文本框中输入的内容变成单元格td的内容,再加上keydown事件,进行按键处理,在这里我们使用keydown事件,因为经本人检测, keypress事件在某些浏览器上按键并不会产生按键代码, keyup好像也是一样,
之所以说好像,因为在测试的时候我的IETester出了问题,竟然不给我响应回车和Esc,一按就死了,重装了IETester也还是一样...
最后要说的是jQuery中获取按键代码可用event.keyCode和event.which这两种方法,经本人检测,如果使用event.which,在opera浏览器中检测不到Esc键的按键代码,因此在这里采用event.keyCode方式来获取.
最最后还要说的是我们还得给文本框的click点击事件返回false,要不然的话你点击单元格,里面蛮文本框了之后再点击文本框,触发完文本框的click事件后还会再触发文本框所处在的父结点,即单元格的click事件,这样会产生意想不到的麻烦.所以要给文本框的click点击事件返回false就行了.
还有忘了说了,在正式项目中用到这个功能的话,除了要获取文本框输入的内容,即修改后的内容,还得要获取当前行的某一列,即要获取id,这样才能通过唯一值id来更新数据库中相应的内容,在这里通过prev方法,即当前结点的前一个兄弟结点来获取.
最最最后还要说的一点,就是我在做新闻发布系统的时候用到了上面的这个功能,在实际的操作中想要回车后通过AJAX方式发送数据还有一点小问题,就是如果在当前ASPX页面中有按钮的话,按回车了会让触发ASPX的Page_Load事件,如何解决的话这个留待视频里再说!!!
上头有任务下来了...开始工作....忽忽悠悠又过一个上午....
发表评论
-
jquery制作select列表双向选择
2010-06-15 12:43 1896做项目的时候要用到的一个小功能,以前做过的,用的纯JS ... -
锋利的jQuery实例-图片滚动
2009-11-15 16:02 2776效果看图: 点击按钮后的动画思路倒很容易弄懂,主要就是开始的 ... -
jquery访中关村商城排行榜特效
2009-08-08 11:04 1738目前公司的网站上要用到的效果,其实也算不上什么特效,无非 ... -
框架frame自适应内容高度
2009-07-31 16:17 3005让框架frame自动适应内容的高度 在每个框架子页面中加入如下 ... -
jQuery插件—获取URL参数
2009-06-20 12:44 4016做的项目中需要用到通过JS获取GET参数,上网找了一下,找到如 ... -
中关村网站产品参数页的参数纠错的制作
2009-06-16 21:20 1038今天突然想在正在做的网站中加上个像中关村一样的参数纠错的功能, ... -
鼠标移到某一元素则在元素旁边出现弹出框
2009-05-12 20:54 1889类似于当当网的发货以后的那个发货反馈,鼠标移上去后自动会 ... -
JQuery控制图片无缝滚动
2009-05-10 21:05 6421经常有人问怎么在HTML上制作图片的无缝滚动,我自己在一些项目 ... -
jquery xpath详解
2009-02-17 11:27 3187比如下面html代码 <ul> <li cl ... -
jQuery中使用插件解决ie6下selectfqg元素设置z-index无效的问题!
2009-02-11 11:05 4017没用插件时的效果如下,这是在IE6下预览的结果,层 ... -
jQuery控制元素间隔滚动!
2009-01-12 12:14 1895只记录了本人需要用到的,转载自http://www.yaosa ... -
jquery中筛选表格的特定行数后进行操作
2009-01-06 11:55 3066项目中有个地方,一个页面显示两种商品,显示商品参数的时 ... -
jQuery插件_jcarousel(用于图片滚动)
2008-12-26 14:17 7645效果图如下: 目前制作的项目中用到,先记下来,以备不时之需 ... -
制作多级滑动tab菜单
2008-11-26 11:47 4443效果演示网站:http://kr.shopping.yahoo ... -
jQuery实战(四) - tab菜单
2008-11-19 13:55 2339很多天前就已经看完jQuery实战第四讲了,不过一直没有时间做 ... -
jQuery实战(三)
2008-11-16 15:37 2075刚刚看完第三讲,是用jQuery制作下拉菜单,自己也试着做了一 ... -
只能输入数字的文本框(兼容ie6,7,8,opera,ff,chrome)
2008-11-16 10:36 5681星期天上班真不知道干什么事哦,只好随便看看之前下载的电子书了, ... -
制作符合WEB标准的QQ弹出消息(jQuery)
2008-10-29 11:49 4920这里所说的弹出消息指的是在网页右下角升起又下去的那种框框,在这 ... -
jQuery实战(一)
2008-10-27 12:02 5128从ITCAST上看到出了个jQuery实战的视频(ht ... -
符合WEB标准的浮动层(jQuery版)!
2008-10-26 15:10 11326网上有好多的浮动层之类的代码,所谓的浮动层,就是层里的 ...
相关推荐
### jQuery实战第二版知识点概述 #### 一、书籍基本信息与评价 - **书籍名称**:《jQuery实战第二版》(jQuery in Action, Second Edition) - **作者**:Bear Bibeault 和 Yehuda Katz - **出版商**:MANNING - **...
JQuery实战(中文版)+源码JQuery实战(中文版)+源码JQuery实战(中文版)+源码JQuery实战(中文版)+源码JQuery实战(中文版)+源码JQuery实战(中文版)+源码JQuery实战(中文版)+源码JQuery实战(中文版)+源码...
《JavaScript和jQuery实战手册》是一本深入探讨JavaScript和jQuery编程技术的专业书籍,旨在帮助读者掌握这两门重要技术,提升Web开发能力。JavaScript是互联网上最广泛使用的脚本语言,而jQuery则是JavaScript的一...
JavaScript和jQuery实战手册原书第2版.mobi,完美版本,亚马逊上自费下载的电子版。
《JavaScript和jQuery实战手册 原书第3版》是一本深入浅出的编程指南,专为想要掌握JavaScript和jQuery的开发者所设计。这本书详细介绍了这两种技术的核心概念、语法以及在实际开发中的应用,旨在帮助读者提升Web...
在实战中,学习如何将JavaScript和jQuery结合,可以创建出高效、用户友好的Web应用。例如,通过JavaScript进行前端验证,确保用户输入的数据符合规范;使用jQuery简化DOM操作,提高代码可读性和效率;利用Ajax实现无...
教程名称:王兴魁jQuery实战系列视频课程目录:【】CSDN ITCAST王兴魁jQuery参考代码及PDF课件【】JQuery实战第一讲:概述、环境准备及入门实例【】JQuery实战第三讲:横向纵向菜单【】JQuery实战第二讲:可以编辑的...
jQuery实战(jQuery in Action) 中文版 PDF 人民邮电出版社 Part 4 of 6
几个jquery的使用案例 JQuery实战第一讲:概述、...JQuery实战第二讲:可以编辑的表格 JQuery实战第三讲:横向纵向菜单 JQuery实战第四讲:标签页效果 JQuery实战第五讲:级联下拉框效果 JQuery实战第六讲:窗口效果
- **书名**:《jQuery实战》第二版(jQuery in Action, 2nd Edition) - **作者**:Bear Bibeault 和 Yehuda Katz - **出版商**:Manning Publications - **涵盖版本**:jQuery 1.4 和 jQuery UI 1.8 #### 二、书籍...
在本节"JQuery实战第二讲可以编辑的表格"中,我们将深入探讨如何利用jQuery库创建交互式的、可编辑的表格。jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互,使网页开发变得更加...
有了jQuery和这《jQuery实战》,你不需要再费心劳力地纠缠于各种高深复杂的javascript技巧,只需要使用层迭样式表、XHTML以及普通的javascript知识,就能直接操作页面元素,实现更快速更高效的Web开发。
jQuery实战-权威经典书籍-前端开发人员必看的书籍。
但是,由于给出的部分内容并没有直接提及任何关于jQuery或Web开发的具体知识点,这里将基于标题、描述和标签来构建一个关于jQuery实战的核心知识点概述。 ### jQuery实战中文版 #### 一、jQuery简介 - **定义**:...
《jQuery实战 源代码》是一本专注于讲解jQuery库实际应用和源码解析的专业书籍。jQuery作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务,使得JavaScript编程变得更加...
《JQuery实战》视频教程源码及PPT是一套针对前端开发者精心编排的课程资源,旨在深入浅出地教授如何高效使用JQuery这一强大的JavaScript库。本教程通过丰富的实例和PPT讲解,帮助学习者从基础到进阶,全面掌握JQuery...
《jQuery实战高清PDF》是一本深入浅出的jQuery学习指南,专为对JavaScript库jQuery感兴趣的读者精心打造。这本书不仅提供了详尽的理论知识,还配备了实际的源代码,让读者能够在实践中更好地理解和掌握jQuery的强大...
《jQuery实战中文版》这本书是面向开发者的一本深入学习jQuery的实用指南,旨在帮助读者熟练掌握这个广泛使用的JavaScript库,从而提升网页开发的效率和效果。jQuery是一个轻量级、高性能的JavaScript框架,它简化了...
从给定文件信息来看,此内容主要与“jQuery实战.pdf”的下载相关,它提及的标签是“jQuery”。由于描述中并没有提供具体的PDF文件内容,我无法直接从描述中提炼知识点。不过,我可以根据文件的标题和描述中提及的...