ASP.NET中应用Excel：(9)实现表格的自动增长

当用户编辑Excel工作表的时候，如果在正编辑的单元格上按回车或下键头的时候，编辑焦点会自动向下滚动。当然Excel本身已经具有256X65535的空间，因此这不是什么新鲜事。如果要在我们的HTML表格上实现这样的功能，那就更像Excel了，而且这么简单的功能，没有理由不来个锦上添花。设想一下，当用户使用我们的表格编辑数据，来到最后一行，输入，一按回车，表格自动增加了一行，来到最后一列，再按右键头，表格自动增加了一列，这样的功能是不是很酷？

由于HTML表格是半静态的，需要我们动态添加新的行和列。

由于表示当前单元格处于编辑状态的<INPUT TYPE=Text>元素就是当前输入焦点，因此我们继续在该元素的onkeydown事件上做文章：

[jscript]  view plain copy

1. function onTextBoxKeydown()  
2. {  
3.         ....  
4.         switch(code)  
5.         {  
6.         case 39: // right  
7.             {  
8.                 ....  
9.   
10.                 // 向右增加列，留做课后作业  
11.               }  
12.             break;  
13.         case 13: // carriage return  
14.         case 40: // down  
15.             {  
16.                 sender.onchange();  
17.                 if ( row < tbl.rows.length - 1 )  
18.                     tbl.rows[row + 1].cells[col].onactivate();  
19.                 else // 添加新行  
20.                   {  
21.                     var newrow = tbl.insertRow(-1); // 添加到最后  
22.   
23.                        // 添加与上一行相同的列数  
24.                        // 注意：未考虑上一行存在合并单元格的情况  
25.                        for(var i = 0; i < tbl.rows[row].cells.length; i++ )   
26.                     {  
27.                         var cell = newrow.insertCell(i); // 添加新单元格  
28.   
29.                             // 拷贝上一层的样式  
30.                             cell.style.backgroundColor = tbl.rows[row].cells[i].style.backgroundColor;  
31.                         cell.style.posWidth = tbl.rows[row].cells[i].style.posWidth;  
32.                         cell.style.posHeight = tbl.rows[row].cells[i].style.posHeight;  
33.                         cell.style.borderLeft = '1px solid black';  
34.                         cell.style.borderBottom = '1px solid black';  
35.   
36.                         if ( i == 0 ) // 第一列是行号  
37.                             {  
38.                             cell.align = 'center'; // 居中  
39.                                 cell.innerHTML = row + 1; // 显示行号  
40.                             }  
41.                         else  
42.                         {   // 设置数据域  
43.                                 cell.hasFormula = false;  
44.                             cell.formula = '';  
45.                             cell.dataField = '';  
46.                             cell.innerHTML = ' ';  
47.                             cell.onactivate = onCellActivate;  
48.                             cell.ondeactivate = onCellDeactivate;  
49.   
50.                             if ( i == tbl.rows[row].cells.length - 1) // 如果是最后一列，添加右边框  
51.                                  {  
52.                                 cell.style.borderRight = '1px solid black';  
53.                             }  
54.                         }  
55.                     }  
56.                 }  
57.   
58.                 return false;  
59.             }  
60.   
61.             break;  
62.             ....  

好一点实现应该记录所有行中的最大列数，当添加新行时，其列数应该等于最大列数(还有行标号的列)。