HTML元介紹六 - tr

[導讀] 定義指定表格中的一行。 Specifies a row in a table 註解TD 和 TH 元素可以在行中出現。若要變更 TR 元素中的 HTML，請使用表格物件模型。例如，使用 rowIndex 屬性或 rows 集合取得對特定表格行的

定義

指定表格中的一行。

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的詳細內容。更多資訊請關注PHP中文網其他相關文章！