如何做使表格能够左右移动，例如？？

Question

用到了htc 不懂
他的htc
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<!------------------------------------------------------------------------>
//
//   作者:潘忠山
// 时间:2003.05.5
//   文件: grid.htc  自由表格控件
// 功能:
// 1:动态表格的生成
//   2:单元格输入
// 3:表格列宽的自由调节
// 4:右键菜单
// 5:自定义表格的行数
// 6:自定义表格的列数
// 7:插入行
// 8:插入列
// 9:键盘上下左右自由移动
// 10:最后一行回车键自动加行
//<-------------------------------------------------------------------- -->
<ATTACH EVENT="ondocumentready" HANDLER="GridInit" />
<PUBLIC:ATTACH EVENT="onclick" ONEVENT="document_onclick()" />
<PUBLIC:PROPERTY ID="RowsID" NAME="Rows" PUT="GridPutRows" GET="GridGetRows"  />
<PUBLIC:PROPERTY ID="CellsID" NAME="Cells" PUT="GridPutCells" GET="GridGetCells"  />
<PUBLIC:PROPERTY ID="TopDataID" NAME="TopData" PUT="GridPutTopData" GET="GridGetTopData" />
<PUBLIC:PROPERTY ID="dblInputID" NAME="dblInput" PUT="GridPutdblInput" GET="GridGetdblInput" />//是否支持编辑
<PUBLIC:PROPERTY ID="dblRClickID" NAME="dblRClick" PUT="GridPutdblRClick" GET="GridGetdblRClick" />//是否支持右键
<PUBLIC:PROPERTY ID="dblRClickID" NAME="GridFontSize" PUT="GridPutFontSize" GET="GridGetFontSize" />//设置字体大小<SCRIPT LANGUAGE=javascript id=grid1>
</SCRIPT>
<SCRIPT LANGUAGE=javascript>
var Rows=5;
var Cells=5;
var RowNum=1;
var ColNum=0;var dblClick=false;
var moveQuantity=0;
var formerLineleft=0;
var CellLenght=0;
var RowTNum=0;
var CellTNum=0;
var CellNum=2;
var moveQuantity=0;
var formerLineleft=0;
var changcol=0;
var RightRowNum=0;
var dblRClick=false;
var OldRightRowNum=0;
var MoveRowNum=0;
var NowTabRows=0;
var NowTabCols=0;
var GridFontSize=13;
var dblInput=true;//是否可以对表格进行编辑
var dblRClick=false;//是否支持右键“插入”和删除行
function GridInit() {
grid1.text=unescape(SendHttp("grid.asp?info=1",'',"POST"));
//alert(unescape(SendHttp("grid.asp?info=1",'',"POST")));
var tableHTML="<TABLE  style='position:absolute;BORDER-COLLAPSE: collapse;TABLE-LAYOUT: fixed' cellSpacing=1   cellPadding=0 border=1  oncontextmenu='return false'   >";
tableHTML=tableHTML+"<colgroup>";
for(var k=0;k<Cells;k++){
tableHTML=tableHTML+"<col style='width:60'>";
}
tableHTML=tableHTML+"</colgroup>"
tableHTML=tableHTML+"</table>";
tableHTML=tableHTML+"<input  style='DISPLAY: none; POSITION: absolute;BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid'   >"
tableHTML=tableHTML+"<div style='DISPLAY: none; FONT-SIZE: 13px; LEFT: 10px; WIDTH: 86px; POSITION: absolute; TOP: 621px; HEIGHT: 57px'>";
tableHTML=tableHTML+"<table border='0' style='BORDER-RIGHT: dimgray 2px inset; BORDER-TOP: white 2px outset; FONT-SIZE: 13px; BORDER-LEFT: white 2px outset;  WIDTH: 95px; BORDER-BOTTOM: dimgray 2px inset; HEIGHT: 42px; BACKGROUND-COLOR: silver' align=center>";
tableHTML=tableHTML+"<tr style='CURSOR: default' >";
tableHTML=tableHTML+"<td align=middle >插入一行</td></tr>";
tableHTML=tableHTML+"<tr  style='CURSOR: default'><td align=middle>删除一行</td></tr></table></div>";
tableHTML=tableHTML+"<hr  style='DISPLAY: none; WIDTH: 1px; POSITION: absolute; HEIGHT: 32px' color=black>";
element.innerHTML=tableHTML;
for (var i=0;i<Rows;i++){
element.children[0].insertRow (i)
element.children[0].rows (i).style.height="20"
//element.children[0].rows (i).style.backgroundColor="White"
for (var j=0;j<Cells;j++){
element.children[0].rows(i).insertCell(j)
}
//element.children[0].rows (RightRowNum+1).style.backgroundColor="white"
//element.children[0].rows(RightRowNum+1).style.color=""
}
element.children[0].rows(0).style.backgroundColor="LightGrey"
CellLenght=Cells
element.children[0].attachEvent("onmousemove", grid_onmousemove);
element.children[0].attachEvent("onclick", grid_onclick);
element.children[0].attachEvent("onmouseup", grid_onmouseup);
element.children[0].attachEvent("oncontextmenu", grid_oncontextmenu);
element.children[0].attachEvent("onmousedown", grid_onmousedown);
element.children[1].attachEvent("onblur", MoveInput_onblur);
element.children[1].attachEvent("onkeydown", MoveInput_onkeydown);
element.children[2].children[0].children[0].children[0].children[0].attachEvent("onclick",InsertRow_onclick);//插入一行
element.children[2].children[0].children[0].children[1].children[0].attachEvent("onclick",DelRow_onclick);//删除一行
element.children[2].children[0].children[0].children[0].attachEvent("onmouseout",Tr1_onmouseout);//右键第一行颜色变换
element.children[2].children[0].children[0].children[0].attachEvent("onmouseover",Tr1_onmouseover);//右键第一行颜色变换
element.children[2].children[0].children[0].children[1].attachEvent("onmouseout",Tr2_onmouseout);//右键第二行颜色变换
element.children[2].children[0].children[0].children[1].attachEvent("onmouseover",Tr2_onmouseover);//右键第二行颜色变换
}
function GridPutRows(sValue){
Rows=sValue
RowsID.fireChange()
GridInit()
}
function GridGetRows(){
return Rows
}
function GridPutCells(sValue){
Cells=sValue
CellLenght=sValue
CellsID.fireChange()
GridInit()
}
function GridGetCells(){
return Cells
}
function GridPutTopData(sValue){
var oXML=new ActiveXObject("Microsoft.XMLDOM")
oXML.async=false
oXML.loadXML (sValue)
var lngchildNodeone=parseInt(oXML.childNodes(0).childNodes.length)
for(var i=0;i<lngchildNodeone;i++){
element.children[0].rows(0).cells(i).innerText=oXML.childNodes(0).childNodes(i).text
}
}
function GridGetTopData(){

}
function GridPutdblInput(sValue){
dblInput=sValue;
}
function GridGetdblInput(){
return dblInput
}
function GridPutdblRClick(sValue){
dblRClick=sValue;
}
function GridGetdblRClick(){
return dblRClick
}function GridPutFontSize(sValue){
GridFontSize=sValue;
element.children[0].style.fontSize=GridFontSize;
}
function GridGetFontSize(){
return dblRClick
}function SendHttp(sFile,sPara,sMethod)
{
    if (navigator.onLine==false)
    {
return "你现在处于脱机状态,请联机后再试!"
    }
    var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    xmlhttp.Open(sMethod, sFile, false);
try
{
    xmlhttp.Send(sPara);
}
catch (exception)
{
//alert("服务器忙!")
}
try
{
var returnValue=xmlhttp.responseText;
}
catch (exception)
{
if (exception.description=='系统错误: -1072896748。')
{
returnValue=""
}
}
return returnValue
}
</SCRIPT>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

Answer 1

他的源码
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<HTML  xmlns:IE>
<HEAD>
<STYLE>
@media all 
{
  IE\:grid 
  {
    behavior: url(grid.htc) ;
  }
}
 
</STYLE>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
<!--
var StrOrderID=""
function window_onload() {
grid.Rows=6;
grid.Cells=9;
grid.children[0].style.fontSize=12;
grid.children[0].childNodes(0).childNodes(0).style.width=50;
grid.children[0].childNodes(0).childNodes(2).style.width=100;
grid.dblInput=true;
grid.dblRClick=true; //alert("<root><td>序号</td><td>订单号</td><td>商品代码</td><td>商品货号</td><td>商品名称</td><td>计量单位</td><td>生产批号</td><td>送货数量</td><td>实际数量</td><td>零售价</td><td>购进价</td><td>件数</td><td>金额</td></root>");
grid.TopData="<root><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td><td>第五列</td><td>第六列</td><td>第七列</td><td>第八列</td><td>第九列</td></root>";
var strDisplayXml="<root><td>Y</td><td>Y</td><td>Y</td><td>Y</td><td>Y</td><td>Y</td><td>Y</td><td>Y</td><td>Y</td></root>"; var oXml= new ActiveXObject("Microsoft.XMLDOM");
        oXml.async=false;
oXml.loadXML(strDisplayXml);    
//隐藏不需要显示的列
var nodeNum=oXml.documentElement.childNodes.length;
for (var i=0;i<nodeNum;i++){
if(oXml.documentElement.childNodes.item(i).text=="N"){
grid.children[0].children[0].children[i].style.display="none";
grid.children[0].children[0].children[i].style.width=0;
}
else {
grid.children[0].children[0].children[i].style.display="block"
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY LANGUAGE=javascript onload="return window_onload()" >
<IE:grid id="grid"></IE:grid>
</HTML>＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝