DOM TableRow insertCell() Method
Introduction: The TableRow insertCell() Method in HTML DOM is used to add a single cell into a current Row at any particular position. It is a predefined method of the TableRow Object.
Syntax:
tablerowObject.insertCell(index)
Parameter Values:
- index: It contains a numeric that starts from 0 that indicates the position of the cell to be inserted in a current row. The value of -1 can also be used.
Note:
- The parameter is to be defined mandatory in the Firefox and Opera browser. on the other hand it is optional in safari, chrome and IE Browsers.
- If this parameter is does not contain any value, so insertCell() adds the new cell at the last position in IE and at the first position in Chrome and Safari.
Example 1: In this example, we will insert the cell at the first position using DOM TableRow insertCell() Method.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
HTML DOM TableRow insertCell() Method
</ 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 >
HTML DOM TableRow insertCell() Method
</ h2 >
< table align = "center" >
< tr id = "gfg" >
< td >GEEKS</ td >
< td >FOR</ td >
</ tr >
</ table >
< br >
< button onclick = "row()" >
Add cell at last Position
</ button >
< script >
function row() {
var MyCell =
document.getElementById("gfg");
var AddCell = MyCell.insertCell(-1);
AddCell.innerHTML = "GEEKS";
}
</ script >
</ body >
</ html >
|
Output:
Example 2: In this example, we will insert the cell at the last position using DOM TableRow insertCell() Method.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
HTML DOM TableRow insertCell() Method
</ 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 >
HTML DOM TableRow insertCell() Method
</ h2 >
< table align = "center" >
< tr id = "gfg" >
< td >GEEKS</ td >
< td >FOR</ td >
</ tr >
</ table >
< br >
< button onclick = "row()" >
Add cell at last Position
</ button >
< script >
function row() {
var MyCell =
document.getElementById("gfg");
var AddCell = MyCell.insertCell(-1);
AddCell.innerHTML = "GEEKS";
}
</ script >
</ body >
</ html >
|
Output:
Last Updated :
09 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...