当用户编辑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;
- ....
好一点实现应该记录所有行中的最大列数,当添加新行时,其列数应该等于最大列数(还有行标号的列)。