Javascript Reference - HTML DOM TableRow insertCell() Method

The insertCell() method inserts a cell into the current row.

Browser Support


`insertCell`	Yes	Yes	Yes	Yes	Yes

Syntax

tablerowObject.insertCell(index);

Parameter Values

Value	Description
index	Required in Firefox and Opera, optional in IE, Chrome and Safari. A number starting at 0 sets the position of the new cell in the current row.

Return Value

The inserted cell element.

Example

The following code shows how to insert new cell(s) with content at the beginning of a table row with id="myRow".


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--from   w ww .  j  av a 2 s  .  com-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <tr id="myRow">
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>
</table><br>

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    var row = document.getElementById("myRow");
    var x = row.insertCell(0);
    x.innerHTML = "New cell";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to insert new cell(s) with content at the end of a table row with id="myRow".


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--  w  w  w  .  ja va  2 s. c om-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <tr id="myRow">
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>
</table><br>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
    var row = document.getElementById("myRow");
    var x = row.insertCell(-1);
    x.innerHTML = "New cell";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to insert new cell(s) with content at the index position 2 of a table row with id="myRow".


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--  www .j a  va 2  s .c o m-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <tr id="myRow">
    <td>First cell (index 0)</td>
    <td>Second cell (index 1)</td>
    <td>Third cell (index 2)</td>
  </tr>
</table><br>

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    var row = document.getElementById("myRow");
    var x = row.insertCell(2);
    x.innerHTML = "New cell";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to insert new cell(s) at the beginning of the first table row.


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--from  w w w .  j a  v a 2 s  .  c o  m-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>
</table><br>

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    var firstRow = document.getElementById("myTable").rows[0];
    var x = firstRow.insertCell(0);
    x.innerHTML = "New cell";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 5

The following code shows how to delete the first cell(s) from a table row with id="myRow".


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--from w  ww.ja  va 2 s . c o m-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <tr id="myRow">
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>
</table><br>

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    var row = document.getElementById("myRow");
    row.deleteCell(0);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 6

The following code shows how to insert new row(s) at the beginning of a table.


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--  w  w w.  j  av  a 2 s  . c  o  m-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<br>

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "NEW CELL2";
}
</script>

</body>
</html>

The code above is rendered as follows: