HTMLTableRowElement: cells property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

Thecells read-only property of theHTMLTableRowElement interfacereturns a liveHTMLCollection containing the cells in the row. TheHTMLCollection is live and is automatically updated when cells are added or removed.

Value

A liveHTMLCollection ofHTMLTableCellElement objects.

Examples

This example usesHTMLTableRowElement.cells to display the number of cell in a row.

HTML

html

<table>  <thead>    <tr>      <th>C1</th>      <th>C2</th>      <th>C3</th>      <th>C4</th>      <th>C5</th>    </tr>  </thead>  <tbody>    <tr>      <td>Cell 1</td>      <td>Cell 2</td>    </tr>  </tbody></table><button>Add a cell</button><button>Remove last cell</button><div>This first row has <output>2</output> cell(s).</div>

table {  border-collapse: collapse;}th,td,table {  border: 1px solid black;}button {  margin: 1em 1em 1em 0;}

JavaScript

// Obtain relevant interface elementsconst bodySection = document.querySelectorAll("tbody")[0];const row = bodySection.rows[0]; // Select the first row of the body sectionconst cells = row.cells; // The collection is live, therefore always up-to-dateconst cellNumberDisplay = document.querySelectorAll("output")[0];const addButton = document.getElementById("add");const removeButton = document.getElementById("remove");function updateCellNumber() {  cellNumberDisplay.textContent = cells.length;}addButton.addEventListener("click", () => {  // Add a new cell at the end of the first row  const newCell = row.insertCell();  newCell.textContent = `Cell ${cells.length}`;  // Update the row counter  updateCellNumber();});removeButton.addEventListener("click", () => {  // Delete the row from the body  row.deleteCell(-1);  // Update the row counter  updateCellNumber();});