jQuery(HTML5가 아닌) 편집 가능한 테이블 구현 code_jquery

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("");
$(this).children("input").select();
});
}
// 셀 키보드 이벤트 추가
function addGridKeyPressEvent(){
$(document).keyup(function(event){
if(event.keyCode == 37){
// 왼쪽 화살표
var selectCell = $(".selectCell").prev()[0];
if(selectCell != 정의되지 않음){
$(".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 != 정의되지 않음){
$ (".selectCell").removeClass("selectCell");
$(topCell).addClass("selectCell")
}
} else if(event.keyCode == 39)
// 오른쪽 화살표
var selectCell = $(".selectCell").next()[0]
if(selectCell != undefine){
$(".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 != 정의되지 않음){
$(".selectCell").removeClass("selectCell")
$(topCell).addClass("selectCell")
}
} else if (이벤트 .keyCode == 13){
//키 입력
var selectCell = $(".selectCell")[0]
if(selectCell != undefine){
$(selectCell ) .dblclick();
}
}
});
}
// 셀이 포커스를 잃은 후 테이블 정보 저장
function saveEdit(gridCell){
var pnt =$(gridCell).parent();
$(pnt).html($(gridCell).attr("value"))
$(gridCell).remove();
return{
initBindGridEvent : initBindGridEvent,
saveEdit : saveEdit
}
}()