HTML | DOM Table rows Collection
The Table rows collection is used for returning the collection of all the <tr> elements in a table. The sequence of the <tr> elements are sorted in the same way as their position in the source code.
Syntax
tableObject.rows
Properties
- length : It is used to return the number of <tr> elements in the collection.
Methods
- [index] : It is used for returning the <tr> element from the collection with a specified index.
- item(index) : It is also used for returning the <tr> element from the collection with a specified index.
- namedItem(id) : It is also used for returning the <tr> element from the collection with a specified id.
Below program illustrates the Table rows collection :
Example: Finding out the number of rows in a table.
<!DOCTYPE html> < html > < head > < title >Table rows Collection in HTML </ title > < style > table, td { border: 1px solid green; } h1 { color: green; } h2 { font-family: Impact; } body { text-align: center; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >Table rows Collection</ h2 > < p >To return the number of rows in the table, double-click the "Return Count" button.</ p > < table id = "Courses" align = "center" > < caption >Courses by w3wiki</ caption > < tr > < td >Java</ td > < td >Fork Java</ td > </ tr > < tr > < td >Python</ td > < td >Fork Python</ td > </ tr > < tr > < td >Placements</ td > < td >Sudo Placement</ td > </ tr > </ table > < br > < button ondblclick = "tr()" >Return Count</ button > < p id = "test" ></ p > < script > function tr() { // number of rows. var c = document.getElementById( "Courses").rows.length; document.getElementById("test").innerHTML = c + " Rows are present in the table."; } </ script > </ body > </ html > |
Output:
Before clicking the button:
After clicking the button:
Supported Browsers:
- Apple Safari
- Internet Explorer
- Firefox
- Google Chrome
- Opera