JQuery实现可编辑的报表 _Web前端

JQuery实现可编辑的表格

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");
}

1 楼 congdepeng 2011-04-04

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

2 楼 wustrive_2008 2011-04-04

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

3 楼 congdepeng 2011-04-05

wustrive_2008 写道

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

嘿嘿我上次没仔细看完

4 楼 zui4yi1 2011-04-07

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

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);
           }
        });

6 楼 chinafather 2011-04-07

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

7 楼 longware 2011-04-07

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

8 楼夜之son 2011-04-07

这代码我似曾相识

9 楼 youjianbo_han_87 2011-04-08

有个TableEditor Plugin，去看看吧。

10 楼 ymw3607 2011-04-09

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

11 楼 wustrive_2008 2011-04-10

很强大的插件

12 楼 sunofsummer 2011-04-12

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