Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
DOM TableRow insertCell() Method
The HTML DOM TableRow.insertCell() method is used to insert a new cell(s) (<td>) into a table row (<tr>) and returns a reference to the cell.
This method accepts a single parameter "index" (cell index of the new cell); If the index value is provided as -1 or equal to the number of cells, the new cell will be inserted as the last cell in the row. If the index value is provided as 0, the new cell will be inserted at the first position. If we do not provide the index, by default, it will be -1.
Syntax
Following is the syntax of HTML DOM TableRow.insertCell() method −
Tablerowobject.insertCell(index);
Where, index is an optional parameter which represents the cell index of the new cell.
Note − This parameter is a must in browsers like Firefox and Opera, but optional in Internet Explorer, Chrome, and Safari.
Example
In the following example, we are using the DOM TableRow.insertcell() Method to insert new cell(s) from the index position "1".
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 50%;
}
table td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
table th {
border: 1px solid black;
padding: 8px;
text-align: center;
background-color: #f2f2f2;
}
</style>
</head>
<body>
<p>Click the button to insert new cell(s) from index "1".</p>
<table>
<tr id="myRow">
<th>Cell 1</th>
<th>Cell 2</th>
<th>Cell 3</th>
</tr>
</table><br>
<button onclick="insertNewCell()">Click to ADD</button>
<script>
function insertNewCell() {
var rowElement = document.getElementById("myRow");
var cellElement = rowElement.insertCell(1);
cellElement.innerHTML = "New cell";
}
</script>
</body>
</html>
After executing the above program, whenever we click on the button, it adds new cell(s) from the index position "1".
Example
In the example below, we are inserting new cell(s) from the last position of a table row −
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 50%;
}
table td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
table th {
border: 1px solid black;
padding: 8px;
text-align: center;
background-color: #f2f2f2;
}
</style>
</head>
<body>
<p>Click the button to insert new cell(s) from from last position</p>
<table>
<tr id="myRow">
<th>Cell 1</th>
<th>Cell 2</th>
<th>Cell 3</th>
</tr>
</table><br>
<button onclick="insertNewCell()">Click to ADD</button>
<script>
function insertNewCell() {
var rowElement = document.getElementById("myRow");
var cellElement = rowElement.insertCell(-1);
cellElement.innerHTML = "New cell";
}
</script>
</body>
</html>
Whenever we click on the button, the tablerow.insertcell() method will insert rows from the last position of the table row.
124 Views
