jQuery(非HTML5)可編輯表格實作程式碼_jquery

功能：
點擊單元格選中，選中過程中使用方向鍵更換選中的單元格，選中過程中按回車鍵或直接雙擊單元格進入可編輯狀態，單元格失去焦點時保存修改的內容。

主要實現思路：
選中，移動選中區域等都是依靠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{ 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();
// 新增鍵盤事件
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("");
$(this).children("input").select();
});
}
// 為儲存格新增鍵盤事件
function addGridKeyPressEvent(){
$(document).keyup(function(event){
if(event.keyCode == 37){
// 左箭頭
var selectCell =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