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 相关文章推荐
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
js数组实现权重概率分配
Sep 12 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
JS前端广告拦截实现原理解析
Feb 17 Javascript
用JS实现选项卡
Mar 23 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个人网站架设连环讲(二)
2006/10/09 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
php for 循环使用的简单实例
2016/06/02 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
Javascript实现的分页函数
2006/12/22 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
js代码实现轮播图
2020/05/04 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
tensorflow如何批量读取图片
2019/08/29 Python
Python 高效编程技巧分享
2020/09/10 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
J2EE面试题大全
2016/08/06 面试题
销售顾问的岗位职责
2013/11/13 职场文书
物流合作计划书
2014/01/10 职场文书
中秋节超市促销方案
2014/01/30 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
2014年生产部工作总结
2014/12/17 职场文书
十岁生日答谢词
2015/01/05 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书