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

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

主要实现思路：
选中，移动选中区域等都是依靠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
}
}();