HTML | DOM Table insertRow( ) Method
The Table insertRow() method is used for creating an empty <tr> an element which can be added to a table.
It is generally used for inserting a new row(s) at the specified index in the table.
A <tr> element contain atleast one <th> or <td> elements.
Syntax
tableObject.insertRow(index)
Parameters Used
- index: It is used to specify the position of the row to be inserted. The value 0 results in the insertion of the new row at the first position whereas -1 can be used to insert the new row at the last position.
Return Value : It returns the inserted <tr> element
Below program illustrates the Table insertRow() method :
Example-1: Inserting new row at the first position of a table.
html
<!DOCTYPE html> < html > < head > < title >Table insertRow() method 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 insertRow() method</ h2 > < p >To add a new row at the first position of the table, double-click the "Add Row" button.</ p > < table id = "Courses" align = "center" > < tr > < td >Java</ td > < td >Fork Java</ td > </ tr > < tr > < td >Python</ td > < td >Fork Python</ td > </ tr > </ table > < br > < button ondblclick = "row()" > Add Row </ button > < script > function row() { var MyTable = document.getElementById("Courses"); // insert new row. var NewRow = MyTable.insertRow(0); var Newcell1 = NewRow.insertCell(0); var Newcell2 = NewRow.insertCell(1); Newcell1.innerHTML = "Placement"; Newcell2.innerHTML = "Sudo Placement"; } </ script > </ body > </ html > |
Output:
After clicking the button
Supported Browsers:
- Apple Safari
- Internet Explorer
- Firefox
- Google Chrome
- Opera