jQuery(非HTML5)实现的可编辑表格

功能:

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

主要实现思路:

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

效果如下:

源代码:

HTML代码:


























Item1 Item2 Item3
arthinking Jason itzhai
arthinking Jason itzhai
arthinking Jason itzhai

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

arthinking wechat
欢迎关注itzhai公众号