Assignació dinàmica d'ID als botons de les files de la taula mitjançant JavaScript

Entendre la generació d'identificadors dinàmics per als botons de les taules JavaScript

Quan es generen elements HTML de manera dinàmica com taules i botons mitjançant JavaScript, assignar identificadors únics a aquests elements pot ser un repte. Això és especialment important quan cada fila d'una taula necessita un botó únic per a interaccions separades. Els desenvolupadors sovint s'enfronten a problemes quan intenten assignar identificadors dinàmics dins del innerHTML d'una cèl·lula.

En aquest cas, l'objectiu és crear files de taula a partir d'un objecte JSON i assignar dinàmicament un identificador únic al botó dins de cada fila. Tanmateix, els enfocaments comuns que utilitzen literals de plantilla dins innerHTML pot no funcionar com s'esperava. Això pot causar problemes quan s'intenta fer referència o interactuar amb aquests botons més endavant a l'script.

El problema sorgeix de la manera com processa JavaScript innerHTML i literals de plantilla. Sense l'enfocament correcte, el botó id es mostrarà incorrectament o no s'actualitzarà de manera dinàmica, cosa que farà impossible orientar files específiques per a accions. Aquest és un error comú en la generació de taules dinàmiques.

En aquest article, explorarem com resoldre aquest problema assignant correctament identificadors dinàmics als botons de les cel·les de la taula mitjançant un mètode que garanteix que els identificadors dels botons siguin únics per a cada fila. També oferirem una solució de treball que podeu aplicar als vostres projectes.

Generació d'ID de botó i fila de taula dinàmica en JavaScript

En el desenvolupament de front-end dinàmic, generar identificadors únics per als elements HTML sovint és crucial per gestionar les interaccions dels usuaris, especialment en escenaris on s'han de distingir diversos botons o camps d'entrada. Els scripts comentats anteriorment mostren com crear dinàmicament files i botons de taula, assignant a cada botó un identificador únic que correspon a la seva fila a la taula. Mitjançant l'ús de bucles de JavaScript i la concatenació de cadenes, ens podem assegurar que cada botó tingui un identificador únic, com ara "testbutton0", "testbutton1", etc. Això permet identificar fàcilment el botó que activa un esdeveniment específic, cosa que el converteix en un enfocament pràctic per a la generació de contingut dinàmic.

Una de les funcions bàsiques utilitzades en aquest exemple és table.insertRow(), que insereix noves files en una taula HTML preexistent. Per a cada iteració del bucle, s'afegeix una nova fila a la taula i dins d'aquesta fila, creem dues cel·les: una per al nom de l'empleat i una altra per al botó. La segona cel·la utilitza innerHTML per inserir el botó i el seu identificador generat dinàmicament. Tanmateix, utilitzant innerHTML crear elements té les seves limitacions, sobretot quan es tracta de fer referència a variables com els ID de botons, la qual cosa comporta errors si no es gestiona correctament.

S'utilitza l'enfocament més fiable demostrat a la segona solució document.createElement() per crear elements HTML directament mitjançant JavaScript. Aquest mètode proporciona un millor control sobre la creació d'elements i permet un codi més segur i modular. Mitjançant la creació de botons amb programació i l'assignació d'identificadors dinàmicament mitjançant JavaScript, aquesta solució evita possibles problemes causats per innerHTML i ofereix una manera més neta i segura de generar contingut. A més, fa que sigui més fàcil afegir oients d'esdeveniments directament als botons que s'utilitzen addEventListener(), que ajuda a evitar els controladors d'esdeveniments en línia.

Finalment, la inclusió de identificador.destinatari.de.esdeveniment és fonamental per identificar quin botó s'ha fet clic. Aquesta propietat d'esdeveniment captura l'ID de l'element que ha activat l'esdeveniment, permetent un control precís de les interaccions. Per exemple, quan es fa clic en un botó, el doSmth() La funció alerta l'ID del botó, la qual cosa ajuda a assegurar-se que es pren l'acció correcta en funció del botó específic en què s'ha fet clic. Aquesta combinació de tècniques (creació de files dinàmiques, assignació d'identificació única i gestió d'esdeveniments) la converteix en una solució potent per crear taules interactives basades en dades a la portada.

function buildTable(json) {
  const table = document.getElementById("mytesttable").getElementsByTagName('tbody')[0];
  for (let i = 0; i < json.data.length; i++) {
    const newRow = table.insertRow();
    const cell1 = newRow.insertCell(0);
    const cell2 = newRow.insertCell(1);
    cell1.innerHTML = json.data[i].emp_name;
    let btnId = "testbutton" + i;
    cell2.innerHTML = \`<button id="\${btnId}" onclick="doSmth()>Click Me</button>\`;
  }
}

function doSmth() {
  alert(event.target.id);
}

// Example JSON data
const json = { data: [{ emp_name: "John Doe" }, { emp_name: "Jane Smith" }] };
buildTable(json);

function buildTable(json) {
  const table = document.getElementById("mytesttable").getElementsByTagName('tbody')[0];
  for (let i = 0; i < json.data.length; i++) {
    const newRow = table.insertRow();
    const cell1 = newRow.insertCell(0);
    const cell2 = newRow.insertCell(1);
    cell1.textContent = json.data[i].emp_name;
    const button = document.createElement('button');
    button.id = "testbutton" + i;
    button.textContent = "Click Me";
    button.addEventListener('click', doSmth);
    cell2.appendChild(button);
  }
}

function doSmth(event) {
  alert(event.target.id);
}

// Example JSON data
const json = { data: [{ emp_name: "John Doe" }, { emp_name: "Jane Smith" }] };
buildTable(json);

// Backend - Node.js (app.js)
const express = require('express');
const app = express();
app.use(express.static('public'));

app.get('/data', (req, res) => {
  const data = [
    { emp_name: "John Doe" },
    { emp_name: "Jane Smith" }
  ];
  res.json({ data });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

// Frontend - index.html
<table id="mytesttable">
<thead>
<tr><th>Name</th><th>Action</th></tr>
</thead>
<tbody></tbody>
</table>

<script>
fetch('/data')
  .then(response => response.json())
  .then(json => buildTable(json));

function buildTable(json) {
  const table = document.getElementById("mytesttable").getElementsByTagName('tbody')[0];
  for (let i = 0; i < json.data.length; i++) {
    const newRow = table.insertRow();
    const cell1 = newRow.insertCell(0);
    const cell2 = newRow.insertCell(1);
    cell1.textContent = json.data[i].emp_name;
    const button = document.createElement('button');
    button.id = "testbutton" + i;
    button.textContent = "Click Me";
    button.addEventListener('click', doSmth);
    cell2.appendChild(button);
  }
}

function doSmth(event) {
  alert(event.target.id);
}
</script>

Millora de la generació d'identificadors dinàmics i la interacció a les taules JavaScript

Un aspecte que sovint es passa per alt quan es genera dinàmicament contingut de taula amb JavaScript és el potencial d'escalabilitat i manteniment. A mesura que augmenta el nombre de files de la taula, el rendiment es pot veure afectat, sobretot si el DOM s'actualitza o es reconstrueix constantment. Per optimitzar el rendiment, podeu reduir el nombre de manipulacions directes del DOM construint primer l'estructura de la taula sencera a la memòria, utilitzant un fragment de document, abans d'afegir-lo al DOM. Això minimitza els processos de reflux i repintat, que poden alentir les aplicacions a gran escala.

Un altre element crític en la generació de taules dinàmiques és com gestioneu la delegació d'esdeveniments. Tot i que afegir oients d'esdeveniments individuals a cada botó funciona bé per a taules més petites, pot provocar problemes de rendiment amb conjunts de dades més grans. En canvi, utilitzar la delegació d'esdeveniments us permet escoltar els esdeveniments d'un element principal (com la taula) i processar els clics dels botons de manera més eficient. D'aquesta manera, adjunteu només un oient d'esdeveniments a la taula i, en funció de l'identificador de l'element al qual heu fet clic, podeu determinar l'acció adequada a fer.

Finalment, l'accessibilitat és un altre factor que no s'ha de passar per alt. Quan es generen botons o altres elements interactius de manera dinàmica, és essencial assegurar-se que cada element sigui accessible per a tots els usuaris, inclosos els que utilitzen tecnologies d'assistència. Afegint l'adequada etiquetes d'ària o rols als botons, podeu oferir una experiència d'usuari més inclusiva. A més, provar la vostra taula amb lectors de pantalla o navegació per teclat pot ajudar a descobrir qualsevol problema amb com s'interaccionen els elements en una aplicació web més dinàmica i accessible.