Dans le développement front-end, les tableaux sont l'un des éléments les plus courants. JavaScript peut être utilisé pour générer dynamiquement des tableaux, ce qui facilite notre contrôle et notre fonctionnement des tableaux. Voici quelques méthodes et techniques courantes pour vous aider à mieux rédiger des tableaux JavaScript.
Création et modification de tableaux de base
Les tableaux sont composés de balises HTML
,
,
, ,
,
td> ; à définir. Si vous souhaitez créer un tableau de manière dynamique, vous pouvez générer le tableau en ajoutant ces balises.
Après avoir créé le formulaire, vous pouvez le modifier. Par exemple, vous pouvez ajouter de nouvelles lignes et colonnes :
var table = document.getElementById("myTable");
var row = table.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "Bob";
cell2.innerHTML = "40";
cell3.innerHTML = "Chicago";
Copier après la connexion
Le code ci-dessus ajoute une nouvelle ligne au tableau et remplit les informations dans chaque cellule.
Générer des tableaux basés sur des données
Dans le développement réel, nous devrons peut-être générer dynamiquement des tableaux basés sur certaines données. Supposons que nous ayons un tableau JSON contenant des informations sur les étudiants, nous pouvons alors générer dynamiquement une table en parcourant le tableau.
Ce qui suit est un exemple :
var students = [
{name: "John", age: 25, city: "New York"},
{name: "Jane", age: 30, city: "Los Angeles"},
{name: "Bob", age: 40, city: "Chicago"}
];
var table = document.createElement("table");
var thead = document.createElement("thead");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
for (var key in students[0]) {
var th = document.createElement("th");
th.innerHTML = key.charAt(0).toUpperCase() + key.slice(1);
tr.appendChild(th);
}
thead.appendChild(tr);
table.appendChild(thead);
for (var i = 0; i < students.length; i++) {
var tr = document.createElement("tr");
for (var key in students[i]) {
var td = document.createElement("td");
td.innerHTML = students[i][key];
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
document.body.appendChild(table);
Copier après la connexion
Le code ci-dessus crée d'abord un élément DOM contenant un tableau, puis crée respectivement l'en-tête et le corps du tableau. Au cours du processus de parcours du tableau JSON, les éléments sont ajoutés ligne par ligne en fonction du format de l'en-tête et du corps du tableau.
Il est à noter que la partie grasse du code est utilisée pour mettre en majuscule la première lettre de chaque clé.
Tri des tables
Le tri des tables est l'une des opérations les plus courantes. Le tri des tableaux peut être réalisé via JavaScript.
Ce qui suit est un exemple :
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
dir = "asc";
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("td")[n];
y = rows[i + 1].getElementsByTagName("td")[n];
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
switchcount ++;
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
Copier après la connexion
Le code ci-dessus implémente une fonction qui trie selon une certaine colonne du tableau. Le paramètre n transmis représente le nombre de colonnes à trier.
Filtrage de table
Le filtrage de table est également une opération courante. Les données du tableau peuvent être filtrées via JavaScript.
Ce qui suit est un exemple :
function filterTable() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
Copier après la connexion
Le code ci-dessus implémente une fonction qui filtre les données du tableau en fonction de la valeur dans la zone de saisie. En obtenant la valeur dans la zone de saisie de l'utilisateur, puis en parcourant le contenu de chaque cellule du tableau, si le contenu contient la valeur saisie par l'utilisateur, la ligne de données est conservée, sinon elle est masquée.
Pour résumer, voici quelques codes JavaScript couramment utilisés pour vous aider à contrôler et à utiliser les tables plus facilement. Bien sûr, dans le développement réel, il existe davantage de techniques et de méthodes, et j'espère que vous pourrez les explorer et les essayer davantage.
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!
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
