Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
DOM TableRow insertCell() Method
The HTML DOM TableRow.insertCell() method is used to insert a new cell (<td>) into a table row (<tr>) and returns a reference to the newly created cell. This method is essential for dynamically adding table cells using JavaScript without reloading the page.
Syntax
Following is the syntax of HTML DOM TableRow.insertCell() method
TableRowObject.insertCell(index)
Parameters
The method accepts one optional parameter
index An optional integer that specifies the position where the new cell should be inserted. If not specified, defaults to -1.
The index values work as follows
-1 or omitted Inserts the new cell at the end of the row
0 Inserts the new cell at the beginning of the row
Positive number Inserts the new cell at the specified position
Equal to number of cells Inserts the new cell at the end
Note This parameter is required in Firefox and Opera browsers, but optional in Internet Explorer, Chrome, and Safari.
Return Value
The method returns a reference to the newly created <td> element, which can be used to set content, attributes, or styles.
Inserting Cell at Specific Position
Following example demonstrates inserting a new cell at index position 1
<!DOCTYPE html>
<html>
<head>
<title>TableRow insertCell() - Insert at Index 1</title>
<style>
table {
border-collapse: collapse;
width: 60%;
margin: 20px 0;
}
table td, table th {
border: 1px solid #333;
padding: 10px;
text-align: center;
}
table th {
background-color: #f2f2f2;
font-weight: bold;
}
button {
padding: 8px 16px;
font-size: 14px;
cursor: pointer;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Insert Cell at Index 1</h2>
<p>Click the button to insert a new cell at position 1 (second position).</p>
<table>
<tr id="myRow">
<th>Cell 0</th>
<th>Cell 1</th>
<th>Cell 2</th>
</tr>
</table>
<button onclick="insertNewCell()">Insert Cell at Index 1</button>
<script>
function insertNewCell() {
var rowElement = document.getElementById("myRow");
var cellElement = rowElement.insertCell(1);
cellElement.innerHTML = "New Cell";
cellElement.style.backgroundColor = "#ffeb3b";
}
</script>
</body>
</html>
The output shows the table before and after clicking the button. The new cell is inserted at index 1 with a yellow background
Before: Cell 0 | Cell 1 | Cell 2 After: Cell 0 | New Cell | Cell 1 | Cell 2
Inserting Cell at Last Position
Following example demonstrates inserting a new cell at the end of the row using index -1
<!DOCTYPE html>
<html>
<head>
<title>TableRow insertCell() - Insert at Last Position</title>
<style>
table {
border-collapse: collapse;
width: 60%;
margin: 20px 0;
}
table td, table th {
border: 1px solid #333;
padding: 10px;
text-align: center;
}
table th {
background-color: #f2f2f2;
font-weight: bold;
}
button {
padding: 8px 16px;
font-size: 14px;
cursor: pointer;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Insert Cell at Last Position</h2>
<p>Click the button to insert a new cell at the end of the row.</p>
<table>
<tr id="myRow">
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</table>
<button onclick="insertLastCell()">Insert Cell at End</button>
<script>
function insertLastCell() {
var rowElement = document.getElementById("myRow");
var cellElement = rowElement.insertCell(-1);
cellElement.innerHTML = "Last Cell";
cellElement.style.backgroundColor = "#4caf50";
cellElement.style.color = "white";
}
</script>
</body>
</html>
The new cell is added at the end of the row with a green background
Before: First | Second | Third After: First | Second | Third | Last Cell
Inserting Multiple Cells with Different Content
Following example shows how to insert multiple cells with different content and styling
<!DOCTYPE html>
<html>
<head>
<title>TableRow insertCell() - Multiple Cells</title>
<style>
table {
border-collapse: collapse;
width: 70%;
margin: 20px 0;
}
table td, table th {
border: 1px solid #333;
padding: 8px;
text-align: center;
}
table th {
background-color: #2196f3;
color: white;
font-weight: bold;
}
button {
padding: 8px 16px;
margin: 5px;
font-size: 14px;
cursor: pointer;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Insert Multiple Cells</h2>
<p>Click buttons to insert cells at different positions with unique content.</p>
<table id="myTable">
<tr id="myRow">
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</table>
<button onclick="insertAtStart()">Insert at Start</button>
<button onclick="insertAtMiddle()">Insert at Middle</button>
<button onclick="insertAtEnd()">Insert at End</button>
<script>
function insertAtStart() {
var row = document.getElementById("myRow");
var cell = row.insertCell(0);
cell.innerHTML = "ID";
cell.style.backgroundColor = "#ffcdd2";
}
function insertAtMiddle() {
var row = document.getElementById("myRow");
var middleIndex = Math.floor(row.cells.length / 2);
var cell = row.insertCell(middleIndex);
cell.innerHTML = "Email";
cell.style.backgroundColor = "#c8e6c9";
}
function insertAtEnd() {
var row = document.getElementById("myRow");
var cell = row.insertCell(-1);
cell.innerHTML = "Status";
cell.style.backgroundColor = "#bbdefb";
}
</script>
</body>
</html>
Each button inserts a cell at a different position with distinct background colors for easy identification.
Browser Compatibility
The insertCell() method is supported in all major browsers
| Browser | Support | Index Parameter |
|---|---|---|
| Chrome | Yes | Optional |
| Firefox | Yes | Required |
| Safari | Yes | Optional |
| Internet Explorer | Yes | Optional |
| Opera | Yes | Required |
Common Use Cases
The insertCell() method is commonly used in the following scenarios
Dynamic table creation Building tables based on user input or data from APIs
Adding action columns Inserting edit, delete, or other action buttons to existing rows
Table modifications Allowing users to customize table structure interactively
Data visualization Adding calculated fields or summary columns to data tables
Conclusion
The TableRow insertCell() method provides a powerful way to dynamically add cells to table rows. By specifying different index values, you can control exactly where new cells are positioned, making it ideal for creating interactive and flexible table interfaces. Always include the index parameter for cross-browser compatibility.
422 Views
