Javascript-Löschtabelle

Ausgewählte Zeilen im Raster

Mit der Popularität von Webanwendungen ist JavaScript zu einer weit verbreiteten Programmiersprache geworden. Natürlich müssen wir als Webentwickler häufig Daten in Webanwendungen verarbeiten. Das Löschen von Zeilen in einer Tabelle ist eine der Funktionen. In diesem Artikel besprechen wir, wie man mit JavaScript ausgewählte Zeilen in einer Tabelle löscht.

Schritt 1: HTML-Markup

Zuerst benötigen wir eine HTML-Seite, die eine Tabelle enthält. Erstellen Sie eine Tabelle in HTML mit dem ID-Attribut „table-data“.

<table id="table-data">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>22</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>30</td>
      <td>Male</td>
    </tr>
  </tbody>
</table>

Schritt 2: JavaScript-Code

Als nächstes können wir JavaScript verwenden, um Logik zu schreiben, um die ausgewählten Zeilen in der Tabelle zu löschen. Wir werden die folgenden Schritte verwenden:

1. , um ein Array zu erstellen, das alle ausgewählten Zeilen enthält.
2. Rufen Sie den Index der ausgewählten Zeile aus dem Array ab und löschen Sie ihn.
3. Präsentieren Sie dem Benutzer das aktualisierte Formular.

//获取表格元素
const table = document.getElementById('table-data');

//获取所有表格行
const rows = table.getElementsByTagName('tr');

//保存选定的行
let selected_rows = [];

//将选定的行添加到数组中
function selectRow(row) {
  selected_rows.push(row);
}

//将选定的行从数组中移除
function deselectRow(row) {
  const index = selected_rows.indexOf(row);
  if (index > -1) {
    selected_rows.splice(index, 1);
  }
}

//在单击表格行时调用
function handleClick(event) {
  const row = event.target.parentNode;
  if (row.nodeName === 'TR') {
    if (row.getAttribute('data-selected') === 'true') {
      row.setAttribute('data-selected', 'false');
      deselectRow(row);
    } else {
      row.setAttribute('data-selected', 'true');
      selectRow(row);
    }
  }
}

//为表格行添加单击事件
for (let i = 0; i < rows.length; i++) {
  rows[i].addEventListener('click', handleClick, false);
}

//删除选定的行并重新呈现表格
function deleteRows() {
  for (let i = 0; i < selected_rows.length; i++) {
    const index = selected_rows[i].rowIndex;
    table.deleteRow(index);
  }
  selected_rows = [];
}

//获取删除按钮元素并添加单击事件
const delete_button = document.getElementById('delete-button');
delete_button.addEventListener('click', deleteRows, false);

Schritt 3: Lassen Sie den Benutzer mit der Anwendung interagieren

Schließlich müssen wir dem Benutzer eine Schaltfläche zum Löschen zur Verfügung stellen. Wir werden ein Schaltflächenelement verwenden und ein Klickereignis hinzufügen. Wenn auf die Schaltfläche geklickt wird, rufen wir die Funktion deleteRows() auf, um die ausgewählten Zeilen zu löschen.

<button id="delete-button">Delete Rows</button>

An diesem Punkt haben wir abgeschlossen, wie man ausgewählte Zeilen in einer Tabelle mithilfe von JavaScript löscht. Wir holen uns zuerst die Tabelle, durchlaufen alle Zeilenelemente und fügen jedem Zeilenelement ein Klickereignis hinzu. Anschließend wählen wir Zeilen basierend auf der Auswahl des Benutzers aus oder heben die Auswahl auf. Verwenden Sie abschließend DOM-Operationen, um die ausgewählten Zeilen zu löschen und den Zeilenlöschvorgang abzuschließen.

Referenz:

1. JavaScript zum Löschen von Tabellenzeilen, https://www.w3schools.com/jsref/met_table_deleterow.asp.
2. Erstellen und Ändern von HTML-Elementen mit JavaScript, https://www.digitalocean.com/community/tutorials/creating-and-modifying-html-elements-with-javascript
#🎜🎜 #

Das obige ist der detaillierte Inhalt vonJavascript-Löschtabelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!