Home > Web Front-end > HTML Tutorial > HTML meta introduction six - tr

HTML meta introduction six - tr

巴扎黑
Release: 2017-03-19 18:07:25
Original
1165 people have browsed it

[Introduction] Define a row in the specified table. Specifies a row in a table Note TD and TH elements can appear in a row. To change the HTML in a TR element, use the Table Object Model. For example, use the rowIndex property or the rows collection to get the

definition for a specific table row

Specify a row in the table.

Specifies a row in a table.

Notes

TD and TH elements can appear in a row.

To change the HTML in a TR element, use the Table Object Model. For example, use the rowIndex property or the rows collection to get a reference to a specific table row. You can add or delete rows using insertRow and deleteRow methods. To get 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 contents of a specific cell, use the innerHTML or innerText property.

table objects and their related elements have separate table object models, which are very different from the methods used by conventional object models. For more information about the table object model, see How to Generate Tables Dynamically.

This element is available in HTML in Internet Explorer 3.0 and above, and in script in Internet Explorer 4.0 and above.

This element is a block element.

This element requires a closing tag.

Sample code

This example uses the TR element and the TABLE, TD and TR elements to create a two-row table.

<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>
Copy after login

                       

The above is the detailed content of HTML meta introduction six - tr. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template