Javascript hinzufügen, löschen, ändern und überprüfen

Mit der kontinuierlichen Weiterentwicklung der Netzwerktechnologie ist JavaScript zu einer wesentlichen Fähigkeit für die Webentwicklung geworden. In JavaScript sind das Hinzufügen, Löschen, Ändern und Suchen sehr grundlegende und wichtige Vorgänge. In diesem Artikel wird erläutert, wie Sie mit JavaScript die Funktionen zum Hinzufügen, Löschen, Ändern und Suchen implementieren.

Hinzufügen

In JavaScript können wir Formulare verwenden, um Daten hinzuzufügen. Die Formulare enthalten verschiedene Daten, die hinzugefügt werden müssen, und die zugehörigen Attribute. Nachdem wir die Daten in das Formular eingegeben haben, müssen wir JavaScript verwenden, um die Daten zur Verarbeitung und Speicherung in den Hintergrund zu senden. Das Folgende ist ein JavaScript-Code zum Hinzufügen von Benutzern:

function addUser() {
  //获取表单数据
  var name = document.getElementById('name').value;
  var age = document.getElementById('age').value;
  var gender = document.getElementById('gender').value;
  var telephone = document.getElementById('telephone').value;

  //将数据打包成JSON格式
  var user = {
    "name": name,
    "age": age,
    "gender": gender,
    "telephone": telephone
  };

  //发送请求
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/addUser', true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      alert('添加成功');
    }
  }
  xhr.send(JSON.stringify(user));
}

In diesem Code erhalten wir zunächst die vom Benutzer ausgefüllten Daten aus dem Formular über die Methode getElementById. Packen Sie dann die Daten in das JSON-Format und senden Sie über XMLHttpRequest eine Anfrage an den Server, um einen Benutzer hinzuzufügen. Wenn die Anfrage abgeschlossen ist, wird ein Popup-Fenster eingeblendet, um dem Benutzer mitzuteilen, dass das Hinzufügen erfolgreich war.

Löschen

In JavaScript können wir ein Element auswählen und es dann per Code von der Seite löschen. Dieses Element kann eine Tabellenzeile, ein Datensatz, ein Bild usw. sein. Das Folgende ist ein Beispiel für das Löschen einer Tabellenzeile:

function deleteRow(row) {
  var i = row.parentNode.parentNode.rowIndex;
  document.getElementById("myTable").deleteRow(i);
}

Die Funktion dieser Funktion besteht darin, eine bestimmte Tabellenzeile zu löschen. Wir müssen den Zeilenparameter übergeben, der die zu löschende Tabellenzeile angibt. Da der Zeilenparameter ein HTML-Element ist, können wir seinen übergeordneten Knoten über das Attribut parentNode und dann den übergeordneten Knoten des übergeordneten Knotens über parentNode und schließlich die gesamte Tabelle abrufen. Wir verwenden die Methode deleteRow, um eine Zeile in der Tabelle zu löschen, und der Parameter i gibt die Anzahl der zu löschenden Zeilen an.

Ändern

In JavaScript können wir die Attributwerte von DOM-Knoten direkt ändern, um eine Datenänderung zu erreichen. Das Folgende ist ein Beispiel für das Ändern von Tabelleninformationen:

function editRow(row) {
  for (var i = 0; i < row.parentNode.parentNode.cells.length; i++) {
    var cell = row.parentNode.parentNode.cells[i];
    if (cell.innerHTML != '<button onclick="editRow(this.parentNode.parentNode)">Edit</button>') {
      cell.innerHTML = '<input type="text" value="' + cell.innerHTML + '">';
    }
  }
  row.innerHTML = '<button onclick="updateRow(this.parentNode.parentNode)">Save</button>';
}

function updateRow(row) {
  for (var i = 0; i < row.cells.length; i++) {
    row.cells[i].innerHTML = row.cells[i].childNodes[0].value;
  }
  row.innerHTML = '<button onclick="editRow(this.parentNode)">Edit</button>';
}

Diese beiden Funktionen sind die Vorgänge zum Bearbeiten von Tabellenzeilen bzw. zum Speichern von Änderungen. Beim Bearbeiten einer Tabellenzeile durchlaufen wir zunächst alle Zellen in der Tabelle und wandeln den Inhalt jeder Zelle in ein Textfeld um, damit der Benutzer ihre Werte bearbeiten kann. Wir haben außerdem den Namen der Schaltfläche von „Bearbeiten“ in „Speichern“ geändert, um anzuzeigen, dass Benutzer diese Änderungen speichern können.

Beim Speichern von Änderungen durchlaufen wir alle Zellen in der Tabelle, erhalten ihre jeweiligen Werte und ersetzen das Textfeld durch den ursprünglichen Wert. Wir haben außerdem den Namen der Schaltfläche von „Speichern“ in „Bearbeiten“ geändert, um anzuzeigen, dass Benutzer diese Informationen weiterhin bearbeiten können.

Suchen

In JavaScript können wir Arrays und Objekte zum Speichern von Daten verwenden und dann die Suchfunktion implementieren, indem wir diese Daten durchlaufen. Das Folgende ist ein Beispiel für die Ermittlung des Kontostands anhand des Namens:

var accounts = [
  {"name": "张三", "balance": 10000},
  {"name": "李四", "balance": 20000},
  {"name": "王五", "balance": 30000},
];

for (var i = 0; i < accounts.length; i++) {
  if (accounts[i].name == '李四') {
    alert('李四的账户余额为：' + accounts[i].balance);
    break;
  }
}

In diesem Beispiel definieren wir ein Konten-Array, das mehrere Objekte speichert. Zu den Objekten gehören der Kontoname und der Kontostand. Durch Durchlaufen dieses Arrays finden wir das Konto mit dem Namen „John Doe“ und geben seinen Kontostand zurück.

Fazit

Das Obige sind einige einfache Beispiele für die Verwendung von JavaScript zum Implementieren von Hinzufügungs-, Lösch-, Änderungs- und Suchvorgängen. Der Einsatz von JavaScript ist jedoch nicht darauf beschränkt, wir können auch andere Tools und Frameworks nutzen, um unseren Code zu optimieren. Mit jQuery lassen sich beispielsweise DOM-Operationen optimieren und mit React komplexe Benutzeroberflächen erstellen. Insgesamt ist JavaScript eine sehr wichtige Fähigkeit in der Webentwicklung, und ihre Beherrschung kann uns helfen, verschiedene Aufgaben und Projekte besser zu erledigen.

Das obige ist der detaillierte Inhalt vonJavascript hinzufügen, löschen, ändern und überprüfen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!