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

Showing content from https://developer.mozilla.org/de/docs/Web/API/HTMLTableSectionElement/deleteRow below:

HTMLTableSectionElement: deleteRow()-Methode - Web APIs

Baseline Widely available

Die deleteRow()-Methode der HTMLTableSectionElement-Schnittstelle entfernt eine bestimmte Zeile (<tr>) aus einem gegebenen <section>.

index

index ist ein ganzzahliger Wert, der die Zeile darstellt, die gelöscht werden soll. Der spezielle Index -1 kann jedoch verwendet werden, um die allerletzte Zeile des Abschnitts zu entfernen.

Keiner (undefined).

IndexSizeError DOMException

Wird ausgelöst, wenn index größer oder gleich der Anzahl der verfügbaren Zeilen ist oder ein negativer Wert, der nicht -1 ist.

In diesem Beispiel ermöglichen zwei Schaltflächen das Hinzufügen und Entfernen von Zeilen aus dem Tabellenkörperschaftsabschnitt; es aktualisiert auch ein <output>-Element mit der Anzahl der derzeit in der Tabelle vorhandenen Zeilen.

<table>
  <thead>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
  </thead>
  <tbody>
    <tr>
      <td>X</td>
      <td>Y</td>
      <td>Z</td>
    </tr>
  </tbody>
</table>
<button id="add">Add a row</button>
<button id="remove">Remove last row</button>
<div>This table's body has <output>1</output> row(s).</div>

table {
  border-collapse: collapse;
}

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

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

// Obtain relevant interface elements
const bodySection = document.querySelectorAll("tbody")[0];
const rows = bodySection.rows; // The collection is live, therefore always up-to-date
const rowNumberDisplay = document.querySelectorAll("output")[0];

const addButton = document.getElementById("add");
const removeButton = document.getElementById("remove");

function updateRowNumber() {
  rowNumberDisplay.textContent = rows.length;
}

addButton.addEventListener("click", () => {
  // Add a new row at the end of the body
  const newRow = bodySection.insertRow();

  // Add cells inside the new row
  ["A", "B", "C"].forEach(
    (elt) => (newRow.insertCell().textContent = `${elt}${rows.length}`),
  );

  // Update the row counter
  updateRowNumber();
});

removeButton.addEventListener("click", () => {
  // Delete the row from the body
  bodySection.deleteRow(-1);

  // Update the row counter
  updateRowNumber();
});

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