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


Posted in Javascript onDecember 11, 2012

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

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

源代码下载
EditableTable.rar
Javascript 相关文章推荐
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 #Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 #Javascript
ajax不执行success回调而是执行了error回调
Dec 10 #Javascript
解决js正则匹配换行问题实现代码
Dec 10 #Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 #Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 #Javascript
js里怎么取select标签里的值并修改
Dec 10 #Javascript
You might like
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
django-allauth入门学习和使用详解
2019/07/03 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
工程师岗位职责
2013/11/08 职场文书
微博营销计划书
2014/01/10 职场文书
红色经典电影观后感
2015/06/18 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
Python的property属性详细讲解
2022/04/11 Python