我们可以为HTML表格增加编辑功能，具体表现为：当用户单击某个单元格(术语：激活)，该单元格位置上出现编辑框，背景也与其它未激活的单元格不同，以示区别，当用户完成编辑后，单元格内容被更新。如果用户使用方向键，则变化单元格的激活状态。整个情况类似于Excel中的操作。
要实现上述目的，我们首先要处理单元格的在激活事件(onactivate)和去激活事件(ondeactivate)，具体实现如下：
// 单元格的在激活事件
function onCellActivate ()
{
var parentTbl = this.parentElement.parentElement; // 单元格的父容器，在HTML元素中，单元格是<TD>，其父就是<TR>，<TR>的父就是<TABLE>
// 清除前一个被激活单元格状态
if ( parentTbl.activeCell != null ) // 前一个在激活的单元格存在？
{
if ( parentTbl.activeCell != this ) // 与当前相同是不是同一个？
{
parentTbl.activeCell.style.backgroundColor = ''''; // 不是同一个，则清除背景
parentTbl.activeCell.innerHTML = parentTbl.activeCell.dataField.length > 0 ? parentTbl.activeCell.value2 : '' ''; // 恢复显示内容
}
}
if ( parentTbl.activeCell != this ) // 如果当前单元格和前一个被激活的单元格不是同一个
{
parentTbl.activeCell = this; // 设置当前单元格为被激活的单元格
// 插入编辑框
this.innerHTML = ''<INPUT type="text" value="'' + this.dataField +
''" style="border-top:none;border-left:none;border-right:none;border-bottom:1px dashed black;background-color:transparent;font-weight: bold; color: black;" '' +
'' onkeydown="return onTextBoxKeydown();" '' +
'' onchange="return onTextBoxChange();" ></INPUT>'';
var textBox = this.children[0]; // 取得对象
textBox.width = this.offsetWidth; // 设置宽度
textBox.align = ''right''; // 对齐方式，不起作用
textBox.setActive();
textBox.focus();
this.style.backgroundColor = ''#CCCCFF''; // 设置显眼的背景，表示处于激活状态
}
}
// 单元格的去激活事件
// 当单元格被激活，编辑框出现，单元格就会失去激活，此事件就会激发
function onCellDeactivate ()
{
var parentTbl = this.parentElement.parentElement; // 获取Table
if ( parentTbl.activeCell != this ) // 如果被激活单元格不是当前单元格？
{
this.innerHTML = this.dataField.length > 0 ? this.value2 : '' ''; // 恢复显示内容
}
}
// 单元格的在激活事件
function onCellActivate ()
{
var parentTbl = this.parentElement.parentElement; // 单元格的父容器，在HTML元素中，单元格是<TD>，其父就是<TR>，<TR>的父就是<TABLE>
// 清除前一个被激活单元格状态
if ( parentTbl.activeCell != null ) // 前一个在激活的单元格存在？
{
if ( parentTbl.activeCell != this ) // 与当前相同是不是同一个？
{
parentTbl.activeCell.style.backgroundColor = ''''; // 不是同一个，则清除背景
parentTbl.activeCell.innerHTML = parentTbl.activeCell.dataField.length > 0 ? parentTbl.activeCell.value2 : '' ''; // 恢复显示内容
}
}
if ( parentTbl.activeCell != this ) // 如果当前单元格和前一个被激活的单元格不是同一个
{
parentTbl.activeCell = this; // 设置当前单元格为被激活的单元格
// 插入编辑框
this.innerHTML = ''<INPUT type="text" value="'' + this.dataField +
''" style="border-
