Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/de/docs/Web/API/HTMLTableRowElement/deleteCell below:

HTMLTableRowElement: deleteCell() Methode - Web-APIs

Baseline Widely available

Die deleteCell()-Methode des HTMLTableRowElement-Interfaces entfernt eine bestimmte Tabellenzelle aus einer gegebenen <tr>.

index

Der Zellindex der zu entfernenden Zelle. Wenn index -1 ist oder gleich der Anzahl der Zellen, wird die letzte Zelle der Zeile entfernt.

Keiner (undefined).

IndexSizeError DOMException

Wird ausgelöst, wenn index größer ist als die Anzahl der Zellen oder kleiner als -1.

Dieses Beispiel verwendet HTMLTableRowElement.insertCell(), um einer Zeile eine neue Zelle hinzuzufügen.

<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>

table {
  border-collapse: collapse;
}

th,
td,
table {
  border: 1px solid black;
}

button {
  margin: 1em 1em 1em 0;
}

// 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();
});

Diese Seite wurde automatisch aus dem Englischen übersetzt.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4