基于html和js的人机交互界面

各位大神，小弟js菜鸟。最近在做数控系统人机界面的二次开发。自学了html，和javascript。但开发过程中遇到诸多问题。
由于对两种语言的理解和掌握有限，故求教于各位（急！！！）。
主要功能是编写一个参数设定的界面，与系统的内核进行数据交换（把编好的.html和.js文件放到系统给的user文件夹就行，系统自动会调用）。
我是想用html表格来实现参数的输入和显示。各位有什么好的思路吗？我的思路是在屏幕上insertRow，insertCell。
但一直未能成功。现将自己写的代码贴上（菜鸟，很不咋样，谅解！！！）
  其中的E5000x是系统里的参数，AddParameter和WriteVariables为系统内部提供的函数的方法。我想实现的最简单的像这样
E50001  （输入）           E50002   （输入）E50003  （输入）           E50004   （输入）E50005  （输入）           E50006   （输入）。但我还不清楚怎样把E5000x显示出来，而后面的输入值是空白留着交互的。
<head>
<title>sf8</title>
</head>
<script language="javascript">
 
var nCurRow;
var nCurCol;
var objDReadElS;
var objDVariables;var oRow;
var oCell;var objFactory;
var objDGroupManager;function Loading()
{
   objFactory = new ActiveXObject ("ScriptX.Factory");
   objDGroupManager=new ActiveXObject("APServer.DGroupManager");


   objDReadElS=new ActiveXObject("APServer.DReadELS");
   objDReadElS.Flag=3;
   sinkReadELS=factory.NewEventSink(objDReadElS);
   sinkReadELS("ValueChanged")=ReadELSChanged;
   
   objDReadElS.AddParameter("E50001",1);
   objDReadElS.AddParameter("E50002",2);
   objDReadElS.AddParameter("E50003",3);
   objDReadElS.AddParameter("E50004",4);
   objDReadElS.AddParameter("E50005",5);
   objDReadElS.AddParameter("E50006",6);   
   objDVariables = new ActiveXObject("APServer.DVariables");
   
   ed.style.display="none";
   
 
   CreateRowCreateCell();
   
   oCell=GetCellFromRowCol(0,1);
   SetCellActivated(oCell,1);
   nCurRow=0;
   nCurCol=1;
   document.body.focus();

}
function CreateRowCreateCell()
{
     for(i=0;i<3;i++)
     {
     oRow[i] = document.getElementById("ineptable").insertRow(i);
         for(j=0;j<4;j++)
    {
  oRow[i].insertCell();
        }
     }
}
   
   function  GetCellFromRowCol(nRow,nCol)
{
     var oCell=oRow.rows[nRow].cells[nCol];
 return oCell;

}SetCellActivated(oCell,bActiv)
{
var bActiv;
var oCell=GetCellFromRowCol(nCurRow,nCurCol);
if(bActiv)
{
     var epvalue;
oCell.innerHTML=ed.value;
epvalue=ed.value;
if(nCurRow==0)
{  
   switch(nCurCol)
   {
   case 1: objDVariables.WriteVariables(1,"E50001",epvalue);break;
   case 3: objDVariables.WriteVariables(2,"E50002",epvalue);break;
   default: ;
   }
}
else if(nCurRow==1)
{  
   switch(nCurCol)
   {
   case 1: objDVariables.WriteVariables(3,"E50003",epvalue);break;
   case 3: objDVariables.WriteVariables(4,"E50004",epvalue);break;
   default: ;
   }
}
else if(nCurRow==2)
{  
   switch(nCurCol)
   {
   case 1: objDVariables.WriteVariables(5,"E50005",epvalue);break;
   case 3: objDVariables.WriteVariables(6,"E50006",epvalue);break;
   default: ;
   }
}
}
ed.style.display="none";

}function onclicktable() 
{
window.event.cancelBubble = true;
var oClickedCell = window.event.srcElement;
if (oClickedCell.className == "")   return;
if (oClickedCell.tagName != "TD") return;
if (oClickedCell.className == "CellDisabled") return;
if (ed.style.display == "") return; var oCurCell = GetCellFromRowCol(nCurRow, nCurCol);
SetCellActivated(oCurCell, 0);
SetCellActivated(oClickedCell, 1);
nCurRow = oClickedCell.Row;
nCurCol = oClickedCell.Col;
}function OnBlurInput() {
    if (ed.style.display == "") {
        ed.select();
        ed.focus();
    }
}
</script><body oncontextmenu="return false" ondrag="return false" bgcolor="#fffff0" scrolling="no" onLoad="Loading();" >
    <span id="headline">&nbsp;</span>
        <br>
        <br><table  id="ineptable" bgcolor="#999999" border="0" cellspacing="1" cellpadding="1" width="100%" onDblClick="OnDblClick();" onMouseUp="onclicktable();" >
</table>
<input onBlur="OnBlurInput();" id="ed">
 </body>
</html>