HTML元介绍六-tr

定义

指定表格中的一行。

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 及以上版本的脚本中可用。

此元素是块元素。

此元素需要关闭标签。

示例代码

这个例子使用了 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>

以上就是 HTML元介绍六 - tr的详细内容，更多请关注Gxl网其它相关文章！