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实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
JavaScript实现三级联动效果
Jul 15 Javascript
vue配置多页面的实现方法
May 22 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
构建一个JavaScript插件系统
Oct 20 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 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
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
xajax写的留言本
2006/11/25 PHP
php 中的str_replace 函数总结
2007/04/27 PHP
数据库中排序的对比及使用条件详解
2012/02/23 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
js用图作提交按钮或超连接
2008/03/26 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
Python网络爬虫项目:内容提取器的定义
2016/10/25 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
普通大学毕业生自荐信
2013/11/04 职场文书
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
车间主任岗位职责
2014/03/16 职场文书
师范大学生求职信
2014/06/13 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
大学生求职信怎么写
2015/03/19 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
医院病假条范文
2015/08/17 职场文书
python 实现图片特效处理
2022/04/03 Python