jQuery实现可编辑表格
功能:
单击单元格选中，选中过程中使用方向键更换选中的单元格，选中过程中按回车键或者直接双击单元格进入可编辑状态，单元格失去焦点时保存修改的内容。
主要思路:
选中，移动选中区域等都是依靠jQuery强大的API进行实现的。而可编辑的单元格实际上是在选中单元格时，在单元格上面添加个input输入域，动态的更新数据。
效果图:
源代码:
(1)HTML代码:
1 <table class="editableTable"> 2 <thead> 3 <tr> 4 <th>Item1</th> 5 <th>Item2</th> 6 <th>Item3</th> 7 </tr> 8 </thead> 9 <tbody> 10 <tr> 11 <td class="editable simpleInput">arthinking</td> 12 <td class="editable simpleInput">Jason</td> 13 <td class="editable simpleInput">itzhai</td> 14 </tr> 15 <tr> 16 <td class="editable simpleInput">arthinking</td> 17 <td class="editable simpleInput">Jason</td> 18 <td class="editable simpleInput">itzhai</td> 19 </tr> 20 <tr> 21 <td class="editable simpleInput">arthinking</td> 22 <td class="editable simpleInput">Jason</td> 23 <td class="editable simpleInput">itzhai</td> 24 </tr> 25 </tbody> 26 </table>
(2)css代码:
1 body{ 2 text-shadow:#FFFFFF 1px 1px 1px; 3 } 4 .editableTable{ 5 width: 220px; 6 padding: 10px; 7 background-color: #DDEEF6; 8 border:1px solid #DDEEF6; 9 10 -webkit-border-radius: 6px; 11 -moz-border-radius: 6px; 12 } 13 .editableTable thead{ 14 background:#FFFFCC; 15 } 16 td{ 17 background:#66CCFF; 18 cursor:pointer; 19 } 20 .selectCell{ 21 background:#6699FF; 22 }
(3)JavaScript代码:
1 var EdTable = function(){ 2 // 给单元格绑定事件 3 function initBindGridEvent(){ 4 $("td.editable").unbind(); 5 // 添加单元格点击事件 6 addGridClickEvent(); 7 // 添加单元格双击事件 8 addGridDbClickEvent(); 9 // 添加键盘事件 10 addGridKeyPressEvent(); 11 } 12 13 // 给单元格添加单击事件 14 function addGridClickEvent(){ 15 $("td.simpleInput").bind("click",function(){ 16 $('.simpleInput').each(function(){ 17 $(this).removeClass("selectCell"); 18 }); 19 // 给选中的元素添加选中样式 20 $(this).addClass("selectCell"); 21 }); 22 } 23 24 //给单元格添加双击事件 25 function addGridDbClickEvent(){ 26 $("td.simpleInput").bind("dblclick",function(){ 27 $('.simpleInput').each(function(){ 28 $(this).removeClass("selectCell"); 29 }); 30 var val=$(this).html(); 31 var width = $(this).css("width"); 32 var height = $(this).css("height"); 33 $(this).html("<input type='text' onblur='EdTable.saveEdit(this)' style='width:"+ width +";height:"+ height +"; padding:0px; margin:0px;' value='"+val+"' >"); 34 $(this).children("input").select(); 35 }); 36 } 37 38 // 给单元格添加键盘事件 39 function addGridKeyPressEvent(){ 40 $(document).keyup(function(event){ 41 if(event.keyCode == 37){ 42 // 左箭头 43 var selectCell = $(".selectCell").prev()[0]; 44 if(selectCell != undefined){ 45 $(".selectCell").removeClass("selectCell").prev().addClass("selectCell"); 46 } 47 } else if(event.keyCode == 38){ 48 // 上箭头 49 var col = $(".selectCell").prevAll().length; 50 var topCell = $(".selectCell").parent("tr").prev().children()[col]; 51 if(topCell != undefined){ 52 $(".selectCell").removeClass("selectCell"); 53 $(topCell).addClass("selectCell"); 54 } 55 } else if(event.keyCode == 39){ 56 // 右箭头 57 var selectCell = $(".selectCell").next()[0]; 58 if(selectCell != undefined){ 59 $(".selectCell").removeClass("selectCell").next().addClass("selectCell"); 60 } 61 } else if(event.keyCode == 40){ 62 // 下箭头 63 var col = $(".selectCell").prevAll().length; 64 var topCell = $(".selectCell").parent("tr").next().children()[col]; 65 if(topCell != undefined){ 66 $(".selectCell").removeClass("selectCell"); 67 $(topCell).addClass("selectCell"); 68 } 69 } else if(event.keyCode == 13){ 70 // 回车键 71 var selectCell = $(".selectCell")[0]; 72 if(selectCell != undefined){ 73 $(selectCell).dblclick(); 74 } 75 } 76 }); 77 } 78 79 // 单元格失去焦点后保存表格信息 80 function saveEdit(gridCell){ 81 var pnt=$(gridCell).parent(); 82 $(pnt).html($(gridCell).attr("value")); 83 $(gridCell).remove(); 84 } 85 return{ 86 initBindGridEvent : initBindGridEvent, 87 saveEdit : saveEdit 88 } 89 }();
转载自: http://www.itzhai.com/jquery-html5-to-achieve-an-editable-form.html
