关于动态表格的问题，若llrock看见请进，猛子请进，会的都请进，谢了！！

Question

接上
function makeStyle(){
   this.csscode='';
   for(i=0;i<this.records.length;i++)
       for(j=0;j<this.fields.length;j++){
      this.records[i][j].makeStyle()
          this.csscode+=this.records[i][j].csscode;
   }
}
function getObj(){
   for(i=0;i<this.records.length;i++)
       for(j=0;j<this.fields.length;j++){
           this.records[i][j].getObj();
       }
for(i=0;i<(this.fields.length-1);i++)
     this.VResizer[this.VResizer.length]=new makeLayer('VResizer_'+i);
}
function arrange(){
    var pw=0
   for(j=0;j<this.fields.length;j++){
        this.fields[j].x=j==0?1:(this.fields[j-1].x+this.fields[j-1].width+1);
if(j!=(this.fields.length-1))this.VResizer[j].moveTo((this.fields[j].x+this.fields[j].width),0);
        pw+=1+this.fields[j].width;
for(i=0;i<this.records.length;i++){
   var y=i*21+this.records[i][j].body.x;
           this.records[i][j].body.moveTo(this.fields[j].x,y)
        }
}
   document.all.panel.style.width=pw+1;
   document.all.panel.style.height=21*this.records.length+1}
function addField(){
   var arg=this.addField.arguments;
   var len=arg.length;
 //  this.records[0]=new Array();
   var rID=0;
   this.records[0][0]=new TExcelItem(this,'field_0_0','',0,0);
   for(i=0;i<len;i++){
     var fID=this.fields.length;
 this.fields[fID]=new TExcelItem(this,('field_'+rID+'_'+fID),(arg[i]==''?('unName_'+rID+'_'+fID):arg[i]),rID,fID,100,'#097EBD','#FFFFFF');
 this.records[0][this.records[0].length]=this.fields[fID];
   }
}
function addRecord(){
   var arg=this.addRecord.arguments;
   var rID=this.records.length;
   this.records[rID]=new Array();
   this.records[rID][0]=new TExcelItem(this,('item_'+rID+'_0'),rID,rID,0);
   for(i=1;i<this.fields.length;i++){
       this.records[rID][i]=new TExcelItem(this,('item_'+rID+'_'+i),(!arg[i-1]?'':arg[i-1]),rID,i); 
   }
  // alert(this.fields.length)
}
/***************** drag function *****************************/
function resizeToW(w){
   for(i=0;i<this.records.length;i++){
       this.records[i][dragID].body.css.width=w;
   this.records[i][dragID+1].body.css.width=allw-w;
   this.VResizer[dragID].moveTo(w+ oExcel.records[0][dragID].body.obj.offsetLeft,0);
   this.records[i][dragID+1].body.moveTo(this.VResizer[dragID].obj.offsetLeft+1,0);
   }
}
var dragObj=null;
var dragID=null;
var allw,maxw,x1,x2
function mDown(){
   if(window.event.srcElement.id.indexOf('VResizer_')!=-1)dragObj=window.event.srcElement;
   else return false;
   document.body.style.cursor='e-resize';
   dragID=parseInt(dragObj.id.replace(/\w+\_(\d*)/,'$1'));
   allw=oExcel.records[0][dragID].body.obj.clientWidth+oExcel.records[0][dragID+1].body.obj.clientWidth;
   maxw=allw-20;
   x1=oExcel.records[0][dragID].body.obj.offsetLeft+20+document.all.panel.offsetLeft;
   x2=oExcel.records[0][dragID+1].body.obj.offsetLeft+document.all.panel.offsetLeft+oExcel.records[0][dragID+1].body.obj.clientWidth-20;
   return false
}
function mMove(){
   if(!dragObj||!dragID) return false;
   if(window.event.x<=x1) return oExcel.resizeToW(20);
   if(window.event.x>=x2) return oExcel.resizeToW(maxw);
   var w=window.event.x-document.all.panel.offsetLeft-oExcel.records[0][dragID].body.obj.offsetLeft//-window.event.offsetX;
   return oExcel.resizeToW(w)}
function mUp(){
   document.body.style.cursor='default';
   dragObj=null;
   dragID=null;
   return false
}
function dragInit(){
if (bw.ns) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}else{
   document.onmousedown = mDown
   document.onmousemove = mMove
   document.onmouseup = mUp;
}
}
function makeLayer( idStr ) {
this.idStr = idStr;
if(bw.ns4)this.obj=document.layers[idStr];
else if (bw.ns6) this.obj = document.getElementById(idStr);
else this.obj=eval('document.all.'+idStr);
if (bw.ns6) this.css=this.obj.style;
else if (bw.ns) this.css=this.obj;
else this.css=this.obj.style;
this.x = getLayerX(this.idStr);
this.y = getLayerY(this.idStr);
this.moveTo=lib_moveTo;
return (this);
}
function lib_moveTo(x,y){
    this.x=x!=''?x:this.x;
this.y=y!=''?y:this.y;
this.css.left=this.x;
this.css.top=this.y
}
function getLayerX( ID ) {
   if (bw.ns6) return(parseInt(document.getElementById(ID).style.left));
   else if (bw.ns) return(document.layers[ID].left);
   else return(document.all[ID].offsetLeft);
}
function getLayerY( ID ) {
if (bw.ns6) return(parseInt(document.getElementById(ID).style.top));
else if (bw.ns) return(document.layers[ID].top);
else return(document.all[ID].offsetTop);
}
//-->
</SCRIPT>
</HEAD><BODY onload="dragInit()">
<SCRIPT LANGUAGE="JavaScript"  >
<!--//×&cent;&Ograve;&acirc;&sup2;&raquo;&Ograve;&ordf;°&Ntilde;&Euml;&sup3;&ETH;ò&micro;&szlig;&micro;&sup1;
oExcel=new TExcel('oExcel');
with(oExcel){
    addField('&Ouml;°&frac14;&para;','&Atilde;è&Ecirc;&ouml;','ffgg','efew','egwg','&Egrave;&Euml;','&ordm;&Iuml;&sup1;&sup2;&sup1;¤×&Ecirc;','&frac14;ó&Otilde;&acirc;%');//&Oacute;&Atilde;&Oacute;&Uacute;&acute;&acute;&frac12;¨×&Ouml;&para;&Icirc;
   addRecord('llrock','llrock','1111111111111111111111 ')//&Oacute;&Atilde;&Oacute;&Uacute;&acute;&acute;&frac12;¨&frac14;&Iacute;&Acirc;&frac14;
   addRecord('llrock','llrock','2222222222222222222222')
   addRecord('llrock','llrock','3333333333333333333333 ')
   addRecord('llrock','llrock','44444444444444444444444')
   addRecord('llrock','llrock','5555555555555555555555 ')   makeStyle();
   makeCode();
   document.write(htmlcode);
   getObj();
   arrange();
}
//-->
</SCRIPT>
</BODY>
</HTML>
我想让它的<td>里的高度随着文字而自己变高，就和一般的表格一样，请问如何写，能把改完的给我吗。谢谢！

Answer 1

非常荣幸喜欢我的代码:)
1、再item_makeCode函数替换为，只是添加一个onkeydown事件，主要是因为div没有onchange事件。
function item_makeCode(){
    if(this.rID==0)this.htmlcode='\n<div id="'+this.name+'" style="'+this.csscode+'" ><center><b>'+this.content+'</b></center></div>';
else this.htmlcode='\n<div id="'+this.name+'" style="'+this.csscode+'" CONTENTEDITABLE="true" cursor="text"  onkeydown="'+this.owner.name+'.arrange()" >'+this.content+'</div>'
}2、我重写了arrange函数，把function arrange(){...}替换为
function arrange(){
    for(i=0;i<this.records.length;i++)
    for(j=0;j<this.fields.length;j++) 
    this.records[i].h=Math.max(this.records[i].h,this.records[i][j].body.obj.scrollHeight); this.fields[0].x=1;
var pw=1+this.fields[0].width;
for(i=1;i<this.fields.length;i++){
    this.fields[i].x=this.fields[i-1].x+this.fields[i-1].width+1;
    pw+= this.fields[i].width+1
}

this.records[0].y=1;
var ph=1+this.records[0].h
    for(i=1;i<this.records.length;i++){
        this.records[i].y=this.records[i-1].y+this.records[i-1].h+1;
    ph+=this.records[i].h+1
}
    for(i=0;i<this.records.length;i++)
    for(j=0;j<this.fields.length;j++){ 
     this.records[i][j].body.obj.style.height=this.records[i].h;
 this.records[i][j].body.moveTo(this.fields[j].x,this.records[i].y);
}   document.all.panel.style.width=pw+1;
   document.all.panel.style.height=ph+1;
}
3、替换addField和addRecord函数，其实只是各添加一行（this.records[0].h=this.height;//填加）
function addField(){
   var arg=this.addField.arguments;
   var len=arg.length;
 //  this.records[0]=new Array();
   var rID=0;
   this.records[0][0]=new TExcelItem(this,'field_0_0','',0,0);
   this.records[0].h=this.height;//填加
   for(i=0;i<len;i++){
     var fID=this.fields.length;
 this.fields[fID]=new TExcelItem(this,('field_'+rID+'_'+fID),(arg[i]==''?('unName_'+rID+'_'+fID):arg[i]),rID,fID,100,'#097EBD','#FFFFFF');
 this.records[0][this.records[0].length]=this.fields[fID];
   }
}
function addRecord(){
   var arg=this.addRecord.arguments;
   var rID=this.records.length;
   this.records[rID]=new Array();
   this.records[rID].h=this.height;//填加
   this.records[rID][0]=new TExcelItem(this,('item_'+rID+'_0'),rID,rID,0);
   for(i=1;i<this.fields.length;i++){
       this.records[rID][i]=new TExcelItem(this,('item_'+rID+'_'+i),(!arg[i-1]?'':arg[i-1]),rID,i); 
   }
  // alert(this.fields.length)
}

Answer 2

请问如何生成真正的表格？我是指<table>,<tr>,<td>之类的。我感觉一旦有多行多列的单元格时比较麻烦。

Answer 3

<DIV ID="oTableContainer"></DIV><SCRIPT LANGUAGE="JScript">
// Declare variables and create the header, footer, and caption.
var oTable = document.createElement("TABLE");
var oTHead = document.createElement("THEAD");
var oTBody0 = document.createElement("TBODY");
var oTBody1 = document.createElement("TBODY");
var oTFoot = document.createElement("TFOOT");
var oCaption = document.createElement("CAPTION");
var oRow, oCell;
var i, j;// Declare stock data that would normally be imported from a stock Web site.
var heading = new Array;heading[0] = "Stock symbol";
heading[1] = "High";
heading[2] = "Low";
heading[3] = "Close";var stock = new Array;stock["0,0"] = "ABCD";
stock["0,1"] = "88.625";
stock["0,2"] = "85.50";
stock["0,3"] = "85.81";stock["1,0"] = "EFGH";
stock["1,1"] = "102.75";
stock["1,2"] = "97.50";
stock["1,3"] = "100.063";stock["2,0"] = "IJKL";
stock["2,1"] = "56.125";
stock["2,2"] = "54.50";
stock["2,3"] = "55.688";stock["3,0"] = "MNOP";
stock["3,1"] = "71.75";
stock["3,2"] = "69.00";
stock["3,3"] = "69.00";// Insert the created elements into oTable.
oTable.appendChild(oTHead);
oTable.appendChild(oTBody0);
oTable.appendChild(oTBody1);
oTable.appendChild(oTFoot);
oTable.appendChild(oCaption);// Set the table's border width and colors.
oTable.border=1;
oTable.bgColor="lightslategray";// Insert a row into the header and set its background color.
oRow = document.createElement("TR");
oTHead.appendChild(oRow);
oTHead.bgColor = "lightskyblue";// Create and insert cells into the header row.
for (i=0; i<4; i++)
{
  oCell = document.createElement("TH");
  oCell.innerText = heading[i];
  oRow.appendChild(oCell);
}// Create and insert rows and cells into the first body.
for (i=0; i<2; i++)
{
  oRow = document.createElement("TR");
  oTBody0.appendChild(oRow);  for (j=0; j<4; j++)
  {
    oCell = document.createElement("TD");
oCell.innerText = stock[i + "," + j];
    oRow.appendChild(oCell);
  }
}// Set the background color of the first body.
oTBody0.bgColor = "lemonchiffon";// Create and insert rows and cells into the second body.
for (i=2; i<4; i++)
{
  oRow = document.createElement("TR");
  oTBody1.appendChild(oRow);  for (j=0; j<4; j++)
  {
    oCell = document.createElement("TD");
oCell.innerText = stock[i + "," + j];
    oRow.appendChild(oCell);
  }
}// Set the background color of the second body.
oTBody1.bgColor = "goldenrod";// Create and insert rows and cells into the footer row.
oRow = document.createElement("TR");
oTFoot.appendChild(oRow);
oCell = document.createElement("TD");
oRow.appendChild(oCell);
oCell.innerText = "Quotes are for example only.";
oCell.colSpan = "4";
oCell.bgColor = "lightskyblue";// Set the innerText of the caption and position it at the bottom of the table.
oCaption.innerText = "Created using Document Object Model."
oCaption.style.fontSize = "10";
oCaption.align = "bottom";// Insert the table into the document tree.
oTableContainer.appendChild(oTable);</SCRIPT>

Answer 4

<DIV ID="oTableContainer"></DIV><SCRIPT LANGUAGE="JScript">
// Declare variables and create the header, footer, and caption.
var oTable = document.createElement("TABLE");
var oTHead = document.createElement("THEAD");
var oTBody0 = document.createElement("TBODY");
var oTBody1 = document.createElement("TBODY");
var oTFoot = document.createElement("TFOOT");
var oCaption = document.createElement("CAPTION");
var oRow, oCell;
var i, j;// Declare stock data that would normally be imported from a stock Web site.
var heading = new Array;heading[0] = "Stock symbol";
heading[1] = "High";
heading[2] = "Low";
heading[3] = "Close";var stock = new Array;stock["0,0"] = "ABCD";
stock["0,1"] = "88.625";
stock["0,2"] = "85.50";
stock["0,3"] = "85.81";stock["1,0"] = "EFGH";
stock["1,1"] = "102.75";
stock["1,2"] = "97.50";
stock["1,3"] = "100.063";stock["2,0"] = "IJKL";
stock["2,1"] = "56.125";
stock["2,2"] = "54.50";
stock["2,3"] = "55.688";stock["3,0"] = "MNOP";
stock["3,1"] = "71.75";
stock["3,2"] = "69.00";
stock["3,3"] = "69.00";// Insert the created elements into oTable.
oTable.appendChild(oTHead);
oTable.appendChild(oTBody0);
oTable.appendChild(oTBody1);
oTable.appendChild(oTFoot);
oTable.appendChild(oCaption);// Set the table's border width and colors.
oTable.border=1;
oTable.bgColor="lightslategray";// Insert a row into the header and set its background color.
oRow = document.createElement("TR");
oTHead.appendChild(oRow);
oTHead.bgColor = "lightskyblue";// Create and insert cells into the header row.
for (i=0; i<4; i++)
{
  oCell = document.createElement("TH");
  oCell.innerText = heading[i];
  oRow.appendChild(oCell);
}// Create and insert rows and cells into the first body.
for (i=0; i<2; i++)
{
  oRow = document.createElement("TR");
  oTBody0.appendChild(oRow);  for (j=0; j<4; j++)
  {
    oCell = document.createElement("TD");
oCell.innerText = stock[i + "," + j];
    oRow.appendChild(oCell);
  }
}// Set the background color of the first body.
oTBody0.bgColor = "lemonchiffon";// Create and insert rows and cells into the second body.
for (i=2; i<4; i++)
{
  oRow = document.createElement("TR");
  oTBody1.appendChild(oRow);  for (j=0; j<4; j++)
  {
    oCell = document.createElement("TD");
oCell.innerText = stock[i + "," + j];
    oRow.appendChild(oCell);
  }
}// Set the background color of the second body.
oTBody1.bgColor = "goldenrod";// Create and insert rows and cells into the footer row.
oRow = document.createElement("TR");
oTFoot.appendChild(oRow);
oCell = document.createElement("TD");
oRow.appendChild(oCell);
oCell.innerText = "Quotes are for example only.";
oCell.colSpan = "4";
oCell.bgColor = "lightskyblue";// Set the innerText of the caption and position it at the bottom of the table.
oCaption.innerText = "Created using Document Object Model."
oCaption.style.fontSize = "10";
oCaption.align = "bottom";// Insert the table into the document tree.
oTableContainer.appendChild(oTable);</SCRIPT>

Answer 5

<DIV ID="oTableContainer"></DIV><SCRIPT LANGUAGE="JScript">
// Declare variables and create the header, footer, and caption.
var oTable = document.createElement("TABLE");
var oTHead = document.createElement("THEAD");
var oTBody0 = document.createElement("TBODY");
var oTBody1 = document.createElement("TBODY");
var oTFoot = document.createElement("TFOOT");
var oCaption = document.createElement("CAPTION");
var oRow, oCell;
var i, j;// Declare stock data that would normally be imported from a stock Web site.
var heading = new Array;heading[0] = "Stock symbol";
heading[1] = "High";
heading[2] = "Low";
heading[3] = "Close";var stock = new Array;stock["0,0"] = "ABCD";
stock["0,1"] = "88.625";
stock["0,2"] = "85.50";
stock["0,3"] = "85.81";stock["1,0"] = "EFGH";
stock["1,1"] = "102.75";
stock["1,2"] = "97.50";
stock["1,3"] = "100.063";stock["2,0"] = "IJKL";
stock["2,1"] = "56.125";
stock["2,2"] = "54.50";
stock["2,3"] = "55.688";stock["3,0"] = "MNOP";
stock["3,1"] = "71.75";
stock["3,2"] = "69.00";
stock["3,3"] = "69.00";// Insert the created elements into oTable.
oTable.appendChild(oTHead);
oTable.appendChild(oTBody0);
oTable.appendChild(oTBody1);
oTable.appendChild(oTFoot);
oTable.appendChild(oCaption);// Set the table's border width and colors.
oTable.border=1;
oTable.bgColor="lightslategray";// Insert a row into the header and set its background color.
oRow = document.createElement("TR");
oTHead.appendChild(oRow);
oTHead.bgColor = "lightskyblue";// Create and insert cells into the header row.
for (i=0; i<4; i++)
{
  oCell = document.createElement("TH");
  oCell.innerText = heading[i];
  oRow.appendChild(oCell);
}// Create and insert rows and cells into the first body.
for (i=0; i<2; i++)
{
  oRow = document.createElement("TR");
  oTBody0.appendChild(oRow);  for (j=0; j<4; j++)
  {
    oCell = document.createElement("TD");
oCell.innerText = stock[i + "," + j];
    oRow.appendChild(oCell);
  }
}// Set the background color of the first body.
oTBody0.bgColor = "lemonchiffon";// Create and insert rows and cells into the second body.
for (i=2; i<4; i++)
{
  oRow = document.createElement("TR");
  oTBody1.appendChild(oRow);  for (j=0; j<4; j++)
  {
    oCell = document.createElement("TD");
oCell.innerText = stock[i + "," + j];
    oRow.appendChild(oCell);
  }
}// Set the background color of the second body.
oTBody1.bgColor = "goldenrod";// Create and insert rows and cells into the footer row.
oRow = document.createElement("TR");
oTFoot.appendChild(oRow);
oCell = document.createElement("TD");
oRow.appendChild(oCell);
oCell.innerText = "Quotes are for example only.";
oCell.colSpan = "4";
oCell.bgColor = "lightskyblue";// Set the innerText of the caption and position it at the bottom of the table.
oCaption.innerText = "Created using Document Object Model."
oCaption.style.fontSize = "10";
oCaption.align = "bottom";// Insert the table into the document tree.
oTableContainer.appendChild(oTable);</SCRIPT>