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: