tr insertCell()Method
tr Object
Definition and Usage
The insertCell() method is used to insert an empty <td> element at a specified position in a row of an HTML table.
Syntax
trObject.insertCell(index)
| Value | Description |
|---|---|
| index | This method creates a new <td> element and inserts it into the row at the specified position. The new cell will be inserted before the cell currently located at the position specified by index. If index equals the number of cells in the row, the new cell is appended to the end of the row. |
Browser Support
All major browsers support the insertCell() method
Example
Example
The following example inserts a cell into a table row:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
<script>
function displayResult(){
var firstRow=document.getElementById("myTable").rows[0];
var x=firstRow.insertCell(-1);
x.innerHTML="New cell"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
</tr>
</table>
<br>
<button type="button" onclick="displayResult()">Insert Cell</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
<script>
function displayResult(){
var firstRow=document.getElementById("myTable").rows[0];
var x=firstRow.insertCell(-1);
x.innerHTML="New cell"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
</tr>
</table>
<br>
<button type="button" onclick="displayResult()">Insert Cell</button>
</body>
</html>
Try it Yourself »
More Examples
Add a new row to a table - then add cells and content
tr Object Other Extensions