jQuery(非HTML5)实现的可编辑表格
本文由发表于5年前 | Javascript | 评论数 4 |  被围观 9,879 views+
功能:主要实现思路:效果如下:源代码:HTML代码:CSS代码:JS代码:源代码下载:
功能:

单击单元格选中,选中过程中使用方向键更换选中的单元格,选中过程中按回车键或者直接双击单元格进入可编辑状态,单元格失去焦点时保存修改的内容。

主要实现思路:

选中,移动选中区域等都是依靠jQuery强大的API进行实现的。而可编辑的单元格实际上是在选中单元格时,在单元格上面添加个input输入域,动态的更新数据

效果如下:

源代码:
HTML代码:
<table class="editableTable">
    <thead>
        <tr>
            <th>Item1</th>
            <th>Item2</th>
            <th>Item3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="editable simpleInput">arthinking</td>
            <td class="editable simpleInput">Jason</td>
            <td class="editable simpleInput">itzhai</td>
        </tr>
        <tr>
            <td class="editable simpleInput">arthinking</td>
            <td class="editable simpleInput">Jason</td>
            <td class="editable simpleInput">itzhai</td>
        </tr>
        <tr>
            <td class="editable simpleInput">arthinking</td>
            <td class="editable simpleInput">Jason</td>
            <td class="editable simpleInput">itzhai</td>
        </tr>
    </tbody>
</table>
CSS代码:
body{
    text-shadow:#FFFFFF 1px 1px 1px;
}
.editableTable{
    width: 220px;
    padding: 10px;
    background-color: #DDEEF6;
    border:1px solid #DDEEF6;

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}
.editableTable thead{
    background:#FFFFCC;
}
td{
    background:#66CCFF;
    cursor:pointer;
}
.selectCell{
    background:#6699FF;
}
JS代码:
var EdTable = function(){
    // 给单元格绑定事件
    function initBindGridEvent(){
        $("td.editable").unbind();
        // 添加单元格点击事件
        addGridClickEvent();
        // 添加单元格双击事件
        addGridDbClickEvent();
        // 添加键盘事件
        addGridKeyPressEvent();
    }

    // 给单元格添加单击事件
    function addGridClickEvent(){
        $("td.simpleInput").bind("click",function(){
            $('.simpleInput').each(function(){
                $(this).removeClass("selectCell");
            });
            // 给选中的元素添加选中样式
            $(this).addClass("selectCell");
        });
    }

    //给单元格添加双击事件
    function addGridDbClickEvent(){
        $("td.simpleInput").bind("dblclick",function(){
            $('.simpleInput').each(function(){
                $(this).removeClass("selectCell");
            });
            var val=$(this).html();
            var width = $(this).css("width");
            var height = $(this).css("height");
            $(this).html("<input type='text' onblur='EdTable.saveEdit(this)' style='width:"+ width +";height:"+ height +"; padding:0px; margin:0px;' value='"+val+"' >");
            $(this).children("input").select();
        });    
    }

    // 给单元格添加键盘事件
    function addGridKeyPressEvent(){
        $(document).keyup(function(event){
            if(event.keyCode == 37){
                // 左箭头
                var selectCell = $(".selectCell").prev()[0];
                if(selectCell != undefined){
                    $(".selectCell").removeClass("selectCell").prev().addClass("selectCell");
                }
            } else if(event.keyCode == 38){
                // 上箭头
                var col = $(".selectCell").prevAll().length;
                var topCell = $(".selectCell").parent("tr").prev().children()[col];
                if(topCell != undefined){
                    $(".selectCell").removeClass("selectCell");
                    $(topCell).addClass("selectCell");
                }
            } else if(event.keyCode == 39){
                // 右箭头
                var selectCell = $(".selectCell").next()[0];
                if(selectCell != undefined){
                    $(".selectCell").removeClass("selectCell").next().addClass("selectCell");
                }
            } else if(event.keyCode == 40){
                // 下箭头
                var col = $(".selectCell").prevAll().length;
                var topCell = $(".selectCell").parent("tr").next().children()[col];
                if(topCell != undefined){
                    $(".selectCell").removeClass("selectCell");
                    $(topCell).addClass("selectCell");
                }
            } else if(event.keyCode == 13){
                // 回车键
                var selectCell = $(".selectCell")[0];
                if(selectCell != undefined){
                    $(selectCell).dblclick();
                }
            }
        });
    }

    // 单元格失去焦点后保存表格信息
    function saveEdit(gridCell){
        var pnt=$(gridCell).parent();
        $(pnt).html($(gridCell).attr("value"));
        $(gridCell).remove();
    }
    return{
        initBindGridEvent : initBindGridEvent,
        saveEdit : saveEdit
    }
}();
源代码下载:

EditableTable.rar

除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/jquery-html5-to-achieve-an-editable-form.html
关键字: ,
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2012 7/5
文章评论
    4条评论
  1. 前端开发 2012年07月25日17:46:38  #-49楼 回复 回复

    不够灵活 tag写死了

  2. 前段开发 2012年09月10日22:23:57  #-48楼 回复 回复

    是否还可以提供源代码下载?

    • arthinking 2012年09月14日01:10:42 回复 回复

      您好,下载链接已更新,可以下载。

  3. 路人 2015年06月28日20:59:33  #-47楼 回复 回复

    感謝分享!

    小建議:
    雙擊事件可能重複觸發,
    額外提出一個方法,此方法使表格變成可編輯狀態,
    執行前先判定是否為不可編輯狀態,
    讓迴車鍵和雙擊都調用這個方法。

给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 Java笔记 – RTTI,Class,泛化的Class引用 2013/12/20
2 JVM笔记 – 程序编译与代码优化(早期(编译期)优化) 2015/3/1
3 UML笔记 OOAD面向对象的分析和设计介绍 2011/10/9
4 Javascript笔记 – Javascript中的运算符 2012/5/22
5 Chrome 插件开发小记 2013/6/5
6 jQuery编写钟摆式滚动器 2011/5/15
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.