定义

指定表格中的一行。

Specifies a row in a table.

注释

TD 和 TH 元素可以在行中出现。

要更改 TR 元素中的 HTML，请使用表格对象模型。例如，使用 rowIndex 属性或 rows 集合获取对特定表格行的引用。你可以使用 insertRow 和 deleteRow 方法添加或删除行。要获取对特定单元格的引用，请使用 cellIndex 属性或 cells 集合。你可以使用 insertCell 和 deleteCell 方法添加或删除单元格。要更改特定单元格的内容，请使用 innerHTML 或 innerText 属性。

table 对象及其相关的元素有各自独立的表格对象模型，这与常规对象模型所采用的方法有很大不同。要获得关于表格对象模型更多的信息，请参看如何动态生成表格。

此元素在 Internet Explorer 3.0 及以上版本的 HTML 中可用，在 Internet Explorer 4.0 及以上版本的脚本中可用。

此元素是块元素。

此元素需要关闭标签。

The TD and TH elements are valid within a row.

To change the HTML in the TR element, use the table object model. For example, use the rowIndex property or the rows collection to retrieve a reference to a specific table row. You can add or delete rows using the insertRow and deleteRow methods. To retrieve a reference to a specific cell, use the cellIndex property or the cells collection. You can add or delete cells using the insertCell and deleteCell methods. To change the content of a particular cell, use the innerHTML or innerText property.

The table object and its associated elements have a separate table object model, which utilizes different methods than the general object model. For more information on the table object model, see How to Build Tables Dynamically.

This element is available in HTML as of Internet Explorer 3.0 and in script as of Internet Explorer 4.0.

This element is a block element.

This element requires a closing tag.

示例代码

这个例子使用了 TR 元素和 TABLE, TD 及 TR 元素创建了两行的表格。

<TABLE>

<TR>

<TD>This is the first row.</TD>

</TR>

<TR>

<TD>This is the second row.</TD>

</TR>

</TABLE>

这个例子使用表格对象模型在用户单击按钮时向表格中动态添加了两行和两个单元格。

<SCRIPT>

function createRows(){

   // Insert two rows.

   var oRow1=oTable.insertRow(oTable.rows.length);

   var oRow2=oTable.insertRow(oTable.rows.length);

   // Retrieve the rows collection for the table.

   var aRows=oTable.rows;

   // Retrieve the cells collection for the first row.

   var aCells=oRow1.cells;

   // Insert two cells into the first row.

   var oCell1_1=aRows(oRow1.rowIndex).insertCell(aCells.length);

   var oCell1_2=aRows(oRow1.rowIndex).insertCell(aCells.length);

   // Retrieve the cells collection for the second row.

   aCells=oRow2.cells;

   // Insert two cells into the second row.

   var oCell2_1=aRows(oRow2.rowIndex).insertCell(aCells.length);

   var oCell2_2=aRows(oRow2.rowIndex).insertCell(aCells.length);

   // Add regular HTML values to the 4 new cells. 

   oCell1_1.innerHTML="<B>Cell 1.1!</B>";

   oCell1_2.innerHTML="<B>Cell 1.2!</B>";

   oCell2_1.innerHTML="<B>Cell 2.1!</B>";

   oCell2_2.innerHTML="<B>Cell 2.2!</B>";  

}

</SCRIPT>

<INPUT TYPE="button" VALUE="Create Rows" onclick="createRows()">

<TABLE BORDER=1 ID="oTable">

</TABLE>

另见

table