jQuery实战(二)
很久不上来写文章了,嘿嘿,最近在做一个简单的新闻发布系统,打算做好了以后出个视频的,呵呵,很久不录视频了,不知道家里的那破话筒还用不用得..还有那破机子顶不顶得住啊....唉..一个月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事件,如何解决的话这个留待视频里再说!!!
上头有任务下来了...开始工作....忽忽悠悠又过一个上午....