javascript supprimer la table

Lignes sélectionnées dans la grille

Avec la popularité des applications Web, JavaScript est devenu un langage de programmation largement utilisé. Bien entendu, en tant que développeurs Web, nous devons souvent traiter des données dans des applications Web. La suppression de lignes dans un tableau est l'une des fonctions. Dans cet article, nous verrons comment supprimer les lignes sélectionnées dans un tableau à l'aide de JavaScript.

Étape 1 : balisage HTML

Tout d'abord, nous avons besoin d'une page HTML contenant un tableau. Créez un tableau en HTML avec l'attribut ID "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>

Étape 2 : Code JavaScript

Ensuite, nous pouvons utiliser JavaScript pour écrire une logique permettant de supprimer les lignes sélectionnées dans le tableau. Nous utiliserons les étapes suivantes :

1. Créez un tableau contenant toutes les lignes sélectionnées.
2. Récupérez l'index de la ligne sélectionnée dans le tableau et supprimez-le.
3. Représentez le tableau mis à jour à l'utilisateur.

//获取表格元素
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);

Étape 3 : Laisser l'utilisateur interagir avec l'application

Enfin, nous devons fournir à l'utilisateur un bouton de suppression. Nous utiliserons un élément bouton et ajouterons un événement de clic. Lorsque nous cliquons sur le bouton, nous appellerons la fonction deleteRows() pour supprimer les lignes sélectionnées.

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

À ce stade, nous avons terminé comment supprimer les lignes sélectionnées dans un tableau à l'aide de JavaScript. Nous obtenons d'abord le tableau, parcourons tous les éléments de ligne et ajoutons un événement de clic à chaque élément de ligne, puis nous sélectionnons ou désélectionnons les lignes en fonction de la sélection de l'utilisateur. Enfin, utilisez les opérations DOM pour supprimer les lignes sélectionnées afin de terminer l'opération de suppression de ligne.

Référence :

1. JavaScript pour supprimer les lignes du tableau, https://www.w3schools.com/jsref/met_table_deleterow.asp.
2. Création et modification d'éléments HTML avec JavaScript, https://www.digitalocean.com/community/tutorials/creating-and-modifying-html-elements-with-javascript

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!