JQuery实现可编辑的表格

wustrive_2008

浏览: 73055 次
性别:
来自: 郑州

最近访客更多访客>>

tiredboy

有生菜有夏天

jrc838982823

ranlingwei2003

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery

jQuery CSS JavaScript HTML

edit.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>可以编辑的表格</title>
   <!-- <link type ="text/css" rel="stylesheet" href="css/edit.css" />-->
    <script type="text/javascript" src="jslib/jquery1.5.js"></script>
    <script type="text/javascript" src="jslib/jqueryedit.js"></script>
</head>
<body>
    <table border="1px">

            <tr>
                <td>编辑</td>
                <td>表格</td>
            </tr>

    </table>
</body>
</html>

jqueryedit.js:

$(document).ready(function(){
    var tds=$("td");
    tds.click(tdclick);
});


function tdclick(){
         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);
        input.keyup(function(event){
             var myEvent =event||window.event;
             var kcode=myEvent.keyCode;
            if(kcode==13){
                var inputnode=$(this);
                var inputtext=inputnode.val();
                var tdNode=inputnode.parent();
                tdNode.html(inputtext);
                tdNode.click(tdclick);
            }
        });
        //5，将文本框加入到td中
        td.append(input);       
       //6,清除点击事件
        td.unbind("click");
}

source.rar (1023 Bytes)
下载次数: 649

分享到：

AJAX小总结 | JQuery实现树形菜单

2011-04-04 15:21
浏览 821
评论(12)
论坛回复 / 浏览 (12 / 9438)
分类:Web前端
查看更多

12 楼 sunofsummer 2011-04-12

你这个是照一个培训机构视频写的那个视频还介绍了弹出窗口股票信息显示自动补全的例子都一起发上来吧。

11 楼 wustrive_2008 2011-04-10

很强大的插件

10 楼 ymw3607 2011-04-09

jQgrid 很好很强大，快去google一下吧

9 楼 youjianbo_han_87 2011-04-08

有个TableEditor Plugin，去看看吧。

8 楼夜之son 2011-04-07

这代码我似曾相识

7 楼 longware 2011-04-07

把文件打包传个附件撒~~~~~

6 楼 chinafather 2011-04-07

有个jqgrid的插件可以直接用，看下来是目前jq下最好的grid了，你要的功能基本都有

5 楼 zui4yi1 2011-04-07

input.bind({
           keyup: function(event){
              var myEvent =event||window.event;
              var kcode=myEvent.keyCode;
              if(kcode==13){
                  var inputnode=$(this);
                  var inputtext=inputnode.val();
                  var tdNode=inputnode.parent();
                  tdNode.html(inputtext);
                  tdNode.click(tdclick);
              }
           },
           blur: function(){
            var inputnode=$(this);
            var inputtext=inputnode.val();
            var tdNode=inputnode.parent();
            tdNode.html(inputtext);
            tdNode.click(tdclick);
           }
        });

4 楼 zui4yi1 2011-04-07

tdNode.click(tdclick)与原click事件及unbind为什么不会冲突？

3 楼 congdepeng 2011-04-05

wustrive_2008 写道

当修改完成，按Enter键以后就返回到td状态啊

嘿嘿我上次没仔细看完

2 楼 wustrive_2008 2011-04-04

当修改完成，按Enter键以后就返回到td状态啊

1 楼 congdepeng 2011-04-04

然后呢？编辑完了，再返回td状态，去除<input> ？

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论