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 >GeeksforGeeks</ 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
Last Updated :
20 Nov, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...