How to Build Tables Dynamically(二)

The following example uses the Table Object Model to create the example table used throughout this article.

Show Example
<TABLE ID="oTable" BORDER BGCOLOR="lightslategray">
<TBODY ID="oTBody0"></TBODY>
<TBODY ID="oTBody1"></TBODY>
</TABLE>

<SCRIPT LANGUAGE="JScript">
// Declare variables and create the header, footer, and caption.
var oTHead = oTable.createTHead();
var oTFoot = oTable.createTFoot();
var oCaption = oTable.createCaption();
var oRow, oCell;
var i, j;

// Declare stock data that would normally be retrieved 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 a row into the header.
oRow = oTHead.insertRow();
oTHead.bgColor = "lightskyblue";

// Insert cells into the header row.
for (i=0; i<4; i++)
{
  oCell = oRow.insertCell();
  oCell.align = "center";
  oCell.style.fontWeight = "bold";
  oCell.innerText = heading[i];
}

// Insert rows and cells into the first body.
for (i=0; i<2; i++)
{
  oRow = oTBody0.insertRow();
  for (j=0; j<4; j++)
  {
    oCell = oRow.insertCell();
    oCell.innerText = stock[i + "," + j];
  }
}

// Set the background color of the first body.
oTBody0.bgColor = "lemonchiffon";

// Insert rows and cells into the second body.
for (i=2; i<4; i++)
{
  oRow = oTBody1.insertRow();
  for (j=0; j<4; j++)
  {
    oCell = oRow.insertCell();
    oCell.innerText = stock[i + "," + j];
  }
}

// Set the background color of the second body.
oTBody1.bgColor = "goldenrod";

// Insert rows and cells into the footer row.
oRow = oTFoot.insertRow();
oCell = oRow.insertCell();
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 Table Object Model."
oCaption.style.fontSize = "10";
oCaption.align = "bottom";
</SCRIPT>
Show Me
The tBody elements in the preceding example were defined using HTML, because you cannot use the Table Object Model to create tBody elements. As mentioned previously, if your table contains only one tBody, you do not need to create it because it is implied.

Table Object Model vs. the DOM
The Table Object Model is specific to tables, using methods such as insertRow and insertCell, whereas the DOM is more generic, because it may apply to all elements. The DOM incorporates the parent/child/sibling relationships by using the createElement method, appendChild method, previousSibling property, and nextSibling property. The DOM is powerful in that it allows you to use script to manipulate any element of a document. For more information about the DOM, see the Document Object Model.

Creating a Table Using the DOM
You can use the Table Object Model to create and insert an element with a single call to the insertRow method. The DOM, however, requires two distinct steps: first a call to createElement to create an empty element, and then a call to appendChild to insert the element into the document tree. These two steps are required for all elements, including the table element.

One significant difference between using the Table Object Model and the DOM to create a table is that you must create a tBody element and insert it into the table when using the DOM. Since you are manipulating the document tree directly, the DOM does not create the tBody, which is automatically implied when using HTML.

DOM Structure
You can use the rows and cells collections and the Table Object Model to navigate through table elements. The DOM, however, is based on a tree structure and uses a parent/child/sibling relationship when aclearcase/" target="_blank" >ccessing the nodes of the document. Because of this structural relationship, you must use properties such as firstChild and nextSibling to navigate a table through the DOM.

The following example shows how to use the DOM to navigate the document tree and change the background color of each cell in oTable.

Show Example
var oParent = oTable.firstChild;
var oElement = oParent.firstChild;

// Navigate down the document tree until you find the first TD element.
while (oElement.tagName != "TD")
{
  oParent = oElement;
  oElement = oElement.firstChild;
}

while (oParent != null)
{
  while (oElement != null)
  {
    oElement.runtimeStyle.backgroundColor = "red";
    oElement.runtimeStyle.color = "white";
    oElement = oElement.nextSibling;
  }

  oParent = oParent.nextSibling;

  if (oParent != null)
  {
    oElement = oParent.firstChild;
  }

}
Finally, the following is an example that uses the DOM to create the same table that has been used throughout this document. Although more code is required with the DOM, it allows for more flexibility and control over the table.

Show Example
<!-- Placeholder for the table -->
<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>
Show Me
Sample Game Using the Table Object Model and the DOM
This section uses a sample game to demonstrate the Table Object Model and the DOM. The game includes an image divided into nine graphic files, all the same size, and scrambled in the cells of a table. The player clicks one cell and then another to swap the content of the cells. The point of the game is to unscramble the image.

The table is created using Table Object Model methods. The processing is done using DOM methods. The swapNode method is used to exchange the contents of two cells.

原文转自：http://www.ltesting.net