快捷導(dǎo)航

jQuery(非HTML5)可編輯表格實(shí)現(xiàn)代碼

更新時間：2012年12月11日 09:34:41 作者：

單擊單元格選中，選中過程中使用方向鍵更換選中的單元格，選中過程中按回車鍵或者直接雙擊單元格進(jìn)入可編輯狀態(tài)，單元格失去焦點(diǎn)時保存修改的內(nèi)容

功能：
單擊單元格選中，選中過程中使用方向鍵更換選中的單元格，選中過程中按回車鍵或者直接雙擊單元格進(jìn)入可編輯狀態(tài)，單元格失去焦點(diǎn)時保存修改的內(nèi)容。

主要實(shí)現(xiàn)思路：
選中，移動選中區(qū)域等都是依靠jQuery強(qiáng)大的API進(jìn)行實(shí)現(xiàn)的。而可編輯的單元格實(shí)際上是在選中單元格時，在單元格上面添加個input輸入域，動態(tài)的更新數(shù)據(jù)

源代碼：
HTML代碼：

復(fù)制代碼代碼如下:

 
<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代碼：

復(fù)制代碼代碼如下:

 
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代碼：

復(fù)制代碼代碼如下:

 
var EdTable = function(){ 
// 給單元格綁定事件 
function initBindGridEvent(){ 
$("td.editable").unbind(); 
// 添加單元格點(diǎn)擊事件 
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(); 
} 
} 
}); 
} 
// 單元格失去焦點(diǎn)后保存表格信息 
function saveEdit(gridCell){ 
var pnt=$(gridCell).parent(); 
$(pnt).html($(gridCell).attr("value")); 
$(gridCell).remove(); 
} 
return{ 
initBindGridEvent : initBindGridEvent, 
saveEdit : saveEdit 
} 
}(); 