情已逝，您人别走呀！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

How to Build Tables Dynamically --------------------------------------------------------------------------------This article discusses the structure of HTML tables and explains how to use the Table Object Model to create them. It also compares how the Table Object Model and the Document Object Model (DOM) are used to create tables.The Table Object Model, introduced in Microsoft® Internet Explorer 4.0, enables you to have dynamic control over the content of tables—for example, you can add rows and cells, change the contents of cells, and resize table elements. Dynamic control is useful in situations such as building a table based on the contents of a database, or building a table of calculated data, such as a calendar.Note When using Dynamic HTML (DHTML) to create a document, you can create objects and set the innerText or innerHTML property of the object. However, because of the specific structure required by tables, the innerText and innerHTML properties of the table and tr objects are read-only.This article assumes you know how to write Microsoft® JScript® (compatible with ECMA 262 language specification).Table Structure
Creating and Manipulating Tables
Table Object Model vs. the DOM
Sample Game Using the Table Object Model and the DOM
Table Structure
As a reminder, here is a discussion about the structure of tables. Tables consist of rows and columns, arranged in a manner similar to a spreadsheet. The following steps and sample code show how to use HTML to create a table.Create opening and closing table tags.
Place tr tags within the table tags; the tr tags denote rows.
Place td tags within the tr tags; the td tags denote cells within rows.
Show Example<TABLE BORDER="1">
  <TR>
    <TD>Stock Symbol</TD>
    <TD>High</TD>
    <TD>Low</TD>
    <TD>Close</TD>
  </TR>
  <TR>
    <TD>ABCD</TD>
    <TD>88.625</TD>
    <TD>85.50</TD>
    <TD>85.81</TD>
  </TR>
  <TR>
    <TD>EFGH</TD>
    <TD>102.75</TD>
    <TD>97.50</TD>
    <TD>100.063</TD>
  </TR>
  <TR>
    <TD>IJKL</TD>
    <TD>56.125</TD>
    <TD>54.50</TD>
    <TD>55.688</TD>
  </TR>
  <TR>
    <TD>MNOP</TD>
    <TD>71.75</TD>
    <TD>69.00</TD>
    <TD>69.00</TD>
  </TR>
</TABLE>
Tables can also consist of headers, footers, captions, and multiple tBody elements. Most browsers automatically add the tBody tag to the HTML stream to create well-formed HTML.You can use the following HTML elements to create tables.table Wraps the entire table. Use the table element to apply formatting to the entire table. For example, use the table element to set the width of columns, set the border width, set colors that apply to the whole table, and so on.
tHead Defines the header section of a table. Use tr elements to create multiple rows within a tHead element.
tBody Defines the body of a table. You can use tBody elements to format parts of a table. For example, you can have multiple tBody elements in a table, each with different colors or fonts. The following example demonstrates this technique.
tr Defines a table row. Rows typically host one or more cells, and you can use either the td or th element to define each cell.
td Defines a table data object. td elements are also referred to as cells.
th Defines a table header cell. The th element is similar to a td element, but it provides additional formatting appropriate for a column heading, such as centering the text and making it bold.
tFoot Defines a footer for a table. Like a tBody element, a tFoot must contain other elements. A tFoot can have multiple rows and columns by placing tr and td elements within the tFoot.
caption Provides a place for a brief description of the table. The caption is placed outside the borders of the table. By default, the caption appears at the top of the table, but you can place it at the bottom by using the VALIGN attribute.
col Specifies default values, such as width and background color, for the column.
colGroup Contains a group of columns. Use colGroup to specify the attributes, such as width and alignment, of a group of columns. The following example shows how to use most of the elements listed in the preceding table. Notice how multiple tBody elements are used to add different background colors to the table.
Creating and Manipulating Tables
This section explains how to use JScript and the Table Object Model to create and manipulate the content of tables.The Table Object Model consists of:Methods
Collections
Indexes
Methods
The Table Object Model contains the following methods for creating and manipulating tables.createTHead Creates an empty tHead element in the table.
deleteTHead Deletes the tHead element and its contents from the table.
createTFoot Creates an empty tFoot element in the table.
deleteTFoot Deletes the tFoot element and its contents from the table.
createCaption Creates an empty caption element in the table.
deleteCaption Deletes the caption element and its contents from the table.
insertRow Creates a new row in a table, tBody, tHead, or tFoot, and adds the row to the rows collection of that element.
deleteRow Deletes the specified row in the table and removes the row from the rows collection.
insertCell Creates a new cell in the table row and adds the cell to the cells collection.
deleteCell Deletes the specified cell in the table row and removes the cell from the cells collection. Collections
Tables consist of multiple collections of elements. For example, a table contains a rows collection, and each row contains a cells collection. You can use indexes to access the members of a collection, making it easy to iterate through the collection.The following collections are available through the Table Object Model.tBodies Collection of all tBody objects in the table.
rows Collection of tr objects (rows) from a table object.
cells Collection of all cells in the table row or in the entire table. tBodies
A table object provides access to three sections: tHead, tBody, and tFoot. The tBodies collection consists of all the bodies in a table. There can be only one tHead and one tFoot in a table. If more than one tHead is defined, the first one is considered the actual header for the table. The others are added to the tBodies collection.The Table Object Model does not provide a method for creating tBody elements. However, you can use the DOM to create them. In fact, as you will learn later in this article, you must create a tBody when using the DOM to create a table.rows
Every table contains a rows collection, which consists of all the rows in a table, including the header and footer rows. You can use the insertRow method to add a row to a table and, consequently, to its rows collection. Each row is equivalent to a tr element in HTML. The following code appends an empty row to the rows collection of a table called oTable.var oRow
oRow = oTable.insertRow();
By default, the insertRow method appends a row to the end of the collection; this is faster than inserting a row somewhere in the middle of the collection. However, to insert a row into the middle of a collection, you can pass an index to insertRow, as shown in the following code.var oRow
oRow = oTable.insertRow(3);
The index on the rows collection starts at zero. Therefore, the preceding code inserts a row at the fourth position of the rows collection of oTable. Once a row is created, you can insert cells into it. This is discussed in the next section.Note   The innerText and innerHTML properties are read-only on the tr object. Therefore, you cannot use them to insert text or HTML into a row. You can, however, insert td objects into a row using the insertCell method. Then, you can insert text or HTML into the td objects by setting the innerText or innerHTML property of the cell.
You can access the members of the rows collection by using an index, the same way you access an array. Consider the following code, which iterates through the rows of oTable and sets the font to bold for each row. The code uses array syntax to access the individual members of the rows collection. The length property is used to determine the number of elements in a collection.var curr_row;for (curr_row = 0; curr_row < oTable.rows.length; curr_row++)
{
  oTable.rows[curr_row].style.fontWeight = "bold";
}
cells
After a row is created, you can add cells to it; each row contains a cells collection. To append cells to the cells collection of a row object, call the insertCell method of the row object.Note   By default, the insertCell method adds cells to the end of the collection, because it is faster to add a cell at the end of a row than somewhere in the middle.
The following example inserts a row into a table, and then it inserts a cell into the newly inserted row.var oRow;
var oCell;oRow = oTable.insertRow();
oCell = oRow.insertCell();
Once an empty cell is added to a row, you can insert HTML into the cell by setting its innerHTML property.var oRow;
var oCell;oRow = oTable.insertRow();
oCell = oRow.insertCell();
oCell.innerHTML = "Download the latest version of <I>Internet Explorer</I> from here."
As with the rows collection, use array syntax to access members of the cells collection. You can use nested loops to iterate through every cell in every row. The following example sets the width of every cell in oTable to 20.var oRow;
var curr_row, curr_cell;for (curr_row = 0; curr_row < oTable.rows.length; curr_row++)
{
  oRow = oTable.rows[curr_row];  for (curr_cell = 0; curr_cell < oRow.cells.length; curr_cell++)
  {
    oRow.cells[curr_cell].style.width = "20";
  }
}
The cells collection exposes either td or th elements, depending on whether you are accessing a normal row, a header row, or a footer row.