Ajouter, supprimer, modifier et vérifier javascript

Avec le développement continu de la technologie réseau, JavaScript est devenu une compétence essentielle pour le développement Web. En JavaScript, l'ajout, la suppression, la modification et la recherche sont des opérations très basiques et importantes. Cet article explique comment utiliser JavaScript pour implémenter la fonction d'ajout, de suppression, de modification et de recherche.

Ajouter

En JavaScript, nous pouvons utiliser des formulaires pour ajouter des données. Les formulaires incluent diverses données qui doivent être ajoutées et leurs attributs associés. Après avoir rempli les données dans le formulaire, nous devons utiliser JavaScript pour envoyer les données en arrière-plan pour traitement et sauvegarde. Ce qui suit est un morceau de code JavaScript pour ajouter des utilisateurs :

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

Dans ce code, nous récupérons d'abord les données renseignées par l'utilisateur à partir du formulaire via la méthode getElementById. Regroupez ensuite les données au format JSON et envoyez une demande via XMLHttpRequest pour envoyer une demande d'ajout d'un utilisateur au serveur. Une fois la demande terminée, une boîte de dialogue apparaîtra pour indiquer à l'utilisateur que l'ajout a réussi.

Supprimer

En JavaScript, nous pouvons sélectionner un élément puis supprimer l'élément de la page via le code. Cet élément peut être une ligne de tableau, un enregistrement, une image, etc. Voici un exemple de suppression d'une ligne de tableau :

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

La fonction de cette fonction est de supprimer une certaine ligne de tableau. Nous devons passer le paramètre row, qui spécifie la ligne de tableau à supprimer. Puisque le paramètre row est un élément HTML, nous pouvons obtenir son nœud parent via l'attribut parentNode, puis obtenir le nœud parent du nœud parent via parentNode, et enfin obtenir la table entière. Nous utilisons la méthode deleteRow pour supprimer une ligne du tableau, et le paramètre i spécifie le nombre de lignes à supprimer.

Changement

En JavaScript, nous pouvons directement modifier les valeurs d'attribut​​des nœuds DOM pour réaliser la modification des données. Voici un exemple de modification des informations d'un tableau :

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>';
}

Ces deux fonctions permettent de modifier les lignes du tableau et d'enregistrer les modifications. Lors de l'opération de modification d'une ligne de tableau, nous parcourons d'abord toutes les cellules du tableau et transformons le contenu de chaque cellule en une zone de texte afin que l'utilisateur puisse modifier ses valeurs. Nous avons également modifié le nom du bouton de « Modifier » à « Enregistrer » pour indiquer que les utilisateurs peuvent enregistrer ces modifications.

Lors de l'opération d'enregistrement des modifications, nous parcourons toutes les cellules du tableau, obtenons leurs valeurs respectives et remplaçons la zone de texte par la valeur d'origine. Nous avons également modifié le nom du bouton de « Enregistrer » à « Modifier » pour indiquer que les utilisateurs peuvent continuer à modifier ces informations.

Find

En JavaScript, nous pouvons utiliser des tableaux et des objets pour stocker des données, puis implémenter la fonction de recherche en parcourant ces données. Voici un exemple de recherche du solde du compte par nom :

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

Dans cet exemple, nous définissons un tableau de comptes, qui stocke plusieurs objets. Les objets incluent le nom du compte et le solde du compte. En parcourant ce tableau, nous trouvons le compte nommé « John Doe » et renvoyons le solde de son compte.

Conclusion

Ci-dessus sont quelques exemples simples d'utilisation de JavaScript pour implémenter des opérations d'ajout, de suppression, de modification et de recherche. Cependant, l'utilisation de JavaScript ne se limite pas à cela, nous pouvons également utiliser d'autres outils et frameworks pour optimiser notre code. Par exemple, jQuery peut être utilisé pour optimiser les opérations DOM et React peut être utilisé pour créer des interfaces utilisateur complexes. Dans l’ensemble, JavaScript est une compétence très importante dans le développement Web, et sa maîtrise peut nous aider à mieux mener à bien diverses tâches et projets.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!