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学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
jquery制作select列表双向选择示例代码
Sep 02 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
javascript html5实现表单验证
Mar 01 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
javascript中的隐式调用
Feb 10 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 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将向Java靠拢
2006/10/09 PHP
php下使用以下代码连接并测试
2008/04/09 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
this和执行上下文实现代码
2010/07/01 Javascript
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
javascript判断office版本示例
2014/04/11 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
小程序实现分类页
2019/07/12 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
python Pexpect模块的使用
2020/12/25 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
总监职责范文
2013/11/09 职场文书
残疾人小组计划书
2014/04/27 职场文书
导师工作推荐信范文
2014/05/17 职场文书
内勤岗位职责
2015/02/10 职场文书
小学教师节活动总结
2015/03/20 职场文书
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android