Opérations sur la table principale et traitement des données en JavaScript

Pour maîtriser les opérations sur les tables et le traitement des données en JavaScript, des exemples de code spécifiques sont nécessaires

Dans le développement Web, les tableaux sont un moyen courant d'afficher des données. JavaScript est un langage de programmation puissant capable de réaliser un traitement dynamique et une interaction des données par des tables d'exploitation. Cet article explique comment utiliser JavaScript pour manipuler et traiter des données tabulaires et donne des exemples de code spécifiques.

1. Créer un tableau

En HTML, vous pouvez utiliser la balise table pour créer un tableau simple. En JavaScript, vous pouvez créer un nouvel élément de table via la méthode createElement de l'objet document et l'ajouter à la page.

Exemple de code :

// 创建一个table元素
var table = document.createElement("table");

// 设置表格的class属性
table.className = "table";

// 创建表格的头部
var thead = document.createElement("thead");
var tr = document.createElement("tr");
var th1 = document.createElement("th");
th1.innerHTML = "姓名";
var th2 = document.createElement("th");
th2.innerHTML = "年龄";
tr.appendChild(th1);
tr.appendChild(th2);
thead.appendChild(tr);

// 创建表格的内容
var tbody = document.createElement("tbody");
for (var i = 0; i < data.length; i++) {
  var tr = document.createElement("tr");
  var td1 = document.createElement("td");
  td1.innerHTML = data[i].name;
  var td2 = document.createElement("td");
  td2.innerHTML = data[i].age;
  tr.appendChild(td1);
  tr.appendChild(td2);
  tbody.appendChild(tr);
}

// 将头部和内容添加到表格中
table.appendChild(thead);
table.appendChild(tbody);

// 将表格添加到页面中的某个元素中
var container = document.getElementById("container");
container.appendChild(table);

2. Lecture des données du tableau

Grâce à JavaScript, vous pouvez lire les données du tableau et les traiter. Vous pouvez utiliser l'attribut rows de l'élément table pour obtenir les données de ligne dans le tableau et l'attribut cell pour obtenir les données de cellule dans la ligne.

Exemple de code :

// 获取表格中的所有行
var rows = table.rows;

// 遍历每一行
for (var i = 0; i < rows.length; i++) {
  var cells = rows[i].cells;
  
  // 获取每一行中的单元格数据
  var name = cells[0].innerHTML;
  var age = cells[1].innerHTML;
  
  // 处理数据...
}

3. Ajouter des données au tableau

Grâce à JavaScript, vous pouvez ajouter dynamiquement des données au tableau. Vous pouvez utiliser la méthode insertRow de l'élément table pour insérer une nouvelle ligne à une position spécifiée dans le tableau et la méthode insertCell pour insérer une nouvelle cellule dans la ligne.

Exemple de code :

// 在表格的末尾插入一行
var newRow = table.insertRow(-1);

// 在行中插入单元格
var cell1 = newRow.insertCell(0);
cell1.innerHTML = "张三";
var cell2 = newRow.insertCell(1);
cell2.innerHTML = "20";

4. Mettre à jour les données du tableau

Grâce à JavaScript, vous pouvez également mettre à jour les données du tableau. Vous pouvez modifier directement l'attribut innerHTML d'une cellule du tableau pour mettre à jour les données.

Exemple de code :

// 更新表格中的某个单元格数据
var row = table.rows[1];
row.cells[1].innerHTML = "30";

5. Supprimer les données du tableau

Grâce à JavaScript, vous pouvez supprimer des données dans le tableau. Vous pouvez utiliser la méthode deleteRow de l'élément table pour supprimer une ligne du tableau.

Exemple de code :

// 删除表格中的某一行
var row = table.rows[1];
table.deleteRow(row.rowIndex);

6. Tri des tableaux

Grâce à JavaScript, vous pouvez trier les données dans le tableau. Vous pouvez utiliser la méthode de tri de l'objet Array pour trier les données et restituer le tableau.

Exemples de code :

// 对表格中的数据按年龄进行排序
data.sort(function(a, b) {
  return a.age - b.age;
});

// 清空表格内容
tbody.innerHTML = "";

// 重新渲染表格
for (var i = 0; i < data.length; i++) {
  var tr = document.createElement("tr");
  var td1 = document.createElement("td");
  td1.innerHTML = data[i].name;
  var td2 = document.createElement("td");
  td2.innerHTML = data[i].age;
  tr.appendChild(td1);
  tr.appendChild(td2);
  tbody.appendChild(tr);
}

Les exemples ci-dessus sont des exemples de code spécifiques d'utilisation de JavaScript pour les opérations sur les tables et le traitement des données. En maîtrisant ces compétences, nous pouvons manipuler et traiter avec flexibilité des données tabulaires et obtenir des effets interactifs plus riches. J'espère que le contenu de cet article pourra vous être utile.

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!