-
Notifications
You must be signed in to change notification settings - Fork 22.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add HTMLTable*Element members for cell position in a row (#33326)
- Loading branch information
Showing
8 changed files
with
412 additions
and
49 deletions.
There are no files selected for viewing
82 changes: 82 additions & 0 deletions
82
files/en-us/web/api/htmltablecellelement/cellindex/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| --- | ||
| title: "HTMLTableCellElement: cellIndex property" | ||
| short-title: cellIndex | ||
| slug: Web/API/HTMLTableCellElement/cellIndex | ||
| page-type: web-api-instance-property | ||
| browser-compat: api.HTMLTableCellElement.cellIndex | ||
| --- | ||
|
|
||
| {{ APIRef("HTML DOM") }} | ||
|
|
||
| The **`cellIndex`** read-only property of the {{domxref("HTMLTableCellElement")}} interface | ||
| represents the position of a cell within its row ({{htmlelement("tr")}}). The first cell has an index of `0`. | ||
|
|
||
| ## Value | ||
|
|
||
| Returns the index of the cell, or `-1` if the cell is not part of any row. | ||
|
|
||
| ## Examples | ||
|
|
||
| This example adds a label all the cell numbers of the first row of the `tbody`. | ||
|
|
||
| ### HTML | ||
|
|
||
| ```html | ||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th>Item</th> | ||
| <th>Price</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>Bananas</td> | ||
| <td>$2</td> | ||
| </tr> | ||
| <tr> | ||
| <td>Rice</td> | ||
| <td>$2.5</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| ``` | ||
|
|
||
| ```css hidden | ||
| table { | ||
| border-collapse: collapse; | ||
| } | ||
|
|
||
| th, | ||
| td, | ||
| table { | ||
| border: 1px solid black; | ||
| } | ||
|
|
||
| button { | ||
| margin: 1em 1em 1em 0; | ||
| } | ||
| ``` | ||
|
|
||
| ### JavaScript | ||
|
|
||
| ```js | ||
| const rows = document.querySelectorAll("tbody tr"); | ||
| const cells = rows[0].cells; | ||
|
|
||
| for (const cell of cells) { | ||
| cell.textContent = `${cell.textContent} (cell #${cell.cellIndex})`; | ||
| } | ||
| ``` | ||
|
|
||
| ### Result | ||
|
|
||
| {{EmbedLiveSample("Examples")}} | ||
|
|
||
| ## Specifications | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## Browser compatibility | ||
|
|
||
| {{Compat}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| --- | ||
| title: "HTMLTableRowElement: cells property" | ||
| short-title: cells | ||
| slug: Web/API/HTMLTableRowElement/cells | ||
| page-type: web-api-instance-property | ||
| browser-compat: api.HTMLTableRowElement.cells | ||
| --- | ||
|
|
||
| {{ APIRef("HTML DOM") }} | ||
|
|
||
| The **`cells`** read-only property of the {{domxref("HTMLTableRowElement")}} interface | ||
| returns a live {{domxref("HTMLCollection")}} containing the cells in the row. The `HTMLCollection` is live and is automatically updated when cells are added or removed. | ||
|
|
||
| ## Value | ||
|
|
||
| A live {{domxref("HTMLCollection")}} of {{domxref("HTMLTableCellElement")}} objects. | ||
|
|
||
| ## Examples | ||
|
|
||
| This example uses `HTMLTableRowElement.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 id="add">Add a cell</button> | ||
| <button id="remove">Remove last cell</button> | ||
| <div>This first row has <output>2</output> cell(s).</div> | ||
| ``` | ||
|
|
||
| ```css hidden | ||
| table { | ||
| border-collapse: collapse; | ||
| } | ||
|
|
||
| th, | ||
| td, | ||
| table { | ||
| border: 1px solid black; | ||
| } | ||
|
|
||
| button { | ||
| margin: 1em 1em 1em 0; | ||
| } | ||
| ``` | ||
|
|
||
| ### JavaScript | ||
|
|
||
| ```js | ||
| // Obtain relevant interface elements | ||
| const bodySection = document.querySelectorAll("tbody")[0]; | ||
| const row = bodySection.rows[0]; // Select the first row of the body section | ||
| const cells = row.cells; // The collection is live, therefore always up-to-date | ||
| const 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(); | ||
| }); | ||
| ``` | ||
|
|
||
| ### Result | ||
|
|
||
| {{EmbedLiveSample("Examples", "100%", 175)}} | ||
|
|
||
| ## Specifications | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## Browser compatibility | ||
|
|
||
| {{Compat}} | ||
|
|
||
| ## See also | ||
|
|
||
| - {{domxref("HTMLTableRowElement.insertCell()")}} | ||
| - {{domxref("HTMLTableRowElement.deleteCell()")}} |
130 changes: 130 additions & 0 deletions
130
files/en-us/web/api/htmltablerowelement/deletecell/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,130 @@ | ||
| --- | ||
| title: "HTMLTableRowElement: deleteCell() method" | ||
| short-title: deleteCell() | ||
| slug: Web/API/HTMLTableRowElement/deleteCell | ||
| page-type: web-api-instance-method | ||
| browser-compat: api.HTMLTableRowElement.deleteCell | ||
| --- | ||
|
|
||
| {{APIRef("HTML DOM")}} | ||
|
|
||
| The **`deleteCell()`** method of the {{domxref("HTMLTableRowElement")}} interface removes a | ||
| specific row cell from a given {{htmlelement("tr")}}. | ||
|
|
||
| ## Syntax | ||
|
|
||
| ```js-nolint | ||
| deleteCell(index) | ||
| ``` | ||
|
|
||
| ### Parameters | ||
|
|
||
| - `index` {{optional_inline}} | ||
| - : The cell index of the cell to remove. If `index` is `-1` or equal to the number of cells, the last cell of the row is removed. | ||
|
|
||
| ### Return value | ||
|
|
||
| None ({{jsxref("undefined")}}). | ||
|
|
||
| ### Exceptions | ||
|
|
||
| - `IndexSizeError` {{domxref("DOMException")}} | ||
| - : Thrown if `index` is greater than the number of cells or if it is smaller than `-1`. | ||
|
|
||
| ## Examples | ||
|
|
||
| This example uses {{domxref("HTMLTableRowElement.insertCell()")}} to append a new cell to 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 id="add">Add a cell</button> | ||
| <button id="remove">Remove last cell</button> | ||
| <div>This first row has <output>2</output> cell(s).</div> | ||
| ``` | ||
|
|
||
| ```css hidden | ||
| table { | ||
| border-collapse: collapse; | ||
| } | ||
|
|
||
| th, | ||
| td, | ||
| table { | ||
| border: 1px solid black; | ||
| } | ||
|
|
||
| button { | ||
| margin: 1em 1em 1em 0; | ||
| } | ||
| ``` | ||
|
|
||
| ### JavaScript | ||
|
|
||
| ```js | ||
| // Obtain relevant interface elements | ||
| const bodySection = document.querySelectorAll("tbody")[0]; | ||
| const row = bodySection.rows[0]; // Select the first row of the body section | ||
| const cells = row.cells; // The collection is live, therefore always up-to-date | ||
| const 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(); | ||
| }); | ||
| ``` | ||
|
|
||
| ### Result | ||
|
|
||
| {{EmbedLiveSample("Examples", "100%", 175)}} | ||
|
|
||
| ## Specifications | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## Browser compatibility | ||
|
|
||
| {{Compat}} | ||
|
|
||
| ## See also | ||
|
|
||
| - {{domxref("HTMLTableElement.insertRow()")}} | ||
| - The HTML element representing cells: {{domxref("HTMLTableCellElement")}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.