jQuery可编辑表格实现代码_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{ 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.unbind(); //
添加单元格点击事件 addGridClickEvent(); // 添加单元格双击事件
addGridDbClickEvent(); // 添加键盘事件 addGridKeyPressEvent(); } //
给单元格添加单击事件 function addGridClickEvent(){ $.bind{
$.each.removeClass; // 给选中的元素添加选中样式 $.addClass; }
//给单元格添加双击事件 function addGridDbClickEvent(){ $.bind{
$.each.removeClass; var val=$; var width = $; var height = $;
$.html(“”); $.children; } // 给单元格添加键盘事件 function
addGridKeyPressEvent.keyup{ if{ // 左箭头 var selectCell = $[0];
if(selectCell != undefined){ $.removeClass.addClass; } } else if{ //
上箭头 var col = $.prevAll().length; var topCell =
$.parent.children()[col]; if{ $.removeClass; $.addClass; } } else if{
// 右箭头 var selectCell = $[0]; if(selectCell != undefined){
$.removeClass.addClass; } } else if{ // 下箭头 var col =
$.prevAll().length; var topCell = $.parent.children()[col]; if{
$.removeClass; $.addClass; } } else if{ // 回车键 var selectCell =
$[0]; if(selectCell != undefined){ $.dblclick; } //
单元格失去焦点后保存表格信息 function saveEdit{ var pnt=$; $.attr; $; }
return{ initBindGridEvent : initBindGridEvent, saveEdit : saveEdit }
}(); 源代码下载: EditableTable.rar

发表评论

电子邮件地址不会被公开。 必填项已用*标注