Javascript DOM HTML TableRow insertCell() Method

Introduction

Insert new cell(s) with content at the beginning of a table row with id="myRow":

Click the button to insert new cell(s) at the beginning of the table row.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
  border: 1px solid black;
}
</style>//from w  w w. ja  v  a2  s  .com
</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 insertCell() method inserts a cell into the current row.

Parameter Values

Value Description
index Required. the position of the new cell in the current row. Starting at 0.

The insertCell() method returns the inserted cell element.




PreviousNext

Related