jQuery实现可编辑表格

浏览数：14 / 时间：2015年06月09日

功能:

单击单元格选中，选中过程中使用方向键更换选中的单元格，选中过程中按回车键或者直接双击单元格进入可编辑状态，单元格失去焦点时保存修改的内容。

主要思路:

选中，移动选中区域等都是依靠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 }();