功能： 单击单元格选中，选中过程中使用方向键更换选中的单元格，选中过程中按回车键或者直接双击单元格进入可编辑状态，单元格失去焦点时保存修改的内容。 主要实现思路： 选中，移动选中区域等都是依靠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实现div的拖动并调整大小类似qq空间个性编辑模块

经常上qq空间的朋友一定对qq空间的个性编辑模块印象深刻,可以随意的拖动页面上的元素并且调动大小实现动态布局,当然我每次上csdn博客也会在右下角看见一个新闻窗口,这种效果的确很酷,那么我们也来实现一个吧. 实现>>>详细阅读

本文标题：jQuery(非HTML5)可编辑表格实现代码

地址：http://www.17bianji.com/kaifa2/JS/22849.html

 1/2    1