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

/article/1253950.html

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

功能：

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

主要实现思路：

选中，移动选中区域等都是依靠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

}

}();

http://download.csdn.net/detail/dsg333/7222923