jQuery实战(二)

niunan

浏览: 721388 次
性别:
来自: 南宁

最近访客更多访客>>

u012363178

abc123

Gootearsine

草料场

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

jQuery 单元测试 CSS Excel 体育

很久不上来写文章了,嘿嘿,最近在做一个简单的新闻发布系统,打算做好了以后出个视频的,呵呵,很久不录视频了,不知道家里的那破话筒还用不用得..还有那破机子顶不顶得住啊....唉..一个月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代码如下:

<!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事件,如何解决的话这个留待视频里再说!!!
   上头有任务下来了...开始工作....忽忽悠悠又过一个上午....

分享到：

牛腩自制-.NET实体类生成器 | .NET截取指定长度汉字超出部分以"..."代替

2008-11-06 11:06
浏览 3024
评论(1)
查看更多

1 楼 ttuurr 2008-11-13

后面两课就要钱了

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论