学步园

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

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

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

function onTextBoxKeydown()
{
        ....
        switch(code)
        {
        case 39: // right
            {
                ....

                // 向右增加列，留做课后作业
              }
            break;
        case 13: // carriage return
        case 40: // down
            {
                sender.onchange();
                if ( row < tbl.rows.length - 1 )
                    tbl.rows[row + 1].cells[col].onactivate();
                else // 添加新行
                  {
                    var newrow = tbl.insertRow(-1); // 添加到最后

                       // 添加与上一行相同的列数
                       // 注意：未考虑上一行存在合并单元格的情况
                       for(var i = 0; i < tbl.rows[row].cells.length; i++ ) 
                    {
                        var cell = newrow.insertCell(i); // 添加新单元格

                            // 拷贝上一层的样式
                            cell.style.backgroundColor = tbl.rows[row].cells[i].style.backgroundColor;
                        cell.style.posWidth = tbl.rows[row].cells[i].style.posWidth;
                        cell.style.posHeight = tbl.rows[row].cells[i].style.posHeight;
                        cell.style.borderLeft = '1px solid black';
                        cell.style.borderBottom = '1px solid black';

                        if ( i == 0 ) // 第一列是行号
                            {
                            cell.align = 'center'; // 居中
                                cell.innerHTML = row + 1; // 显示行号
                            }
                        else
                        {   // 设置数据域
                                cell.hasFormula = false;
                            cell.formula = '';
                            cell.dataField = '';
                            cell.innerHTML = ' ';
                            cell.onactivate = onCellActivate;
                            cell.ondeactivate = onCellDeactivate;

                            if ( i == tbl.rows[row].cells.length - 1) // 如果是最后一列，添加右边框
                                 {
                                cell.style.borderRight = '1px solid black';
                            }
                        }
                    }
                }

                return false;
            }

            break;
            ....

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