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 相关文章推荐
js 巧妙去除数组中的重复项
Jan 25 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
angularJS 中input示例分享
Feb 09 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 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
探讨各种PHP字符串函数的总结分析
2013/06/05 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
php实现求相对时间函数
2015/06/15 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
javascript Demo模态窗口
2009/12/06 Javascript
Extjs学习笔记之七 布局
2010/01/08 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
Python Requests 基础入门
2016/04/07 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
python实现推箱子游戏
2020/03/25 Python
初三学生个人自我评定
2014/04/06 职场文书
个人融资协议书
2014/10/02 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
门球健将观后感
2015/06/16 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
2016大一新生军训感言
2015/12/08 职场文书