Dinaminis ID priskyrimas mygtukams lentelės eilutėse naudojant „JavaScript“.

„JavaScript“ lentelių mygtukų dinaminio ID generavimo supratimas

Dinamiškai generuojant HTML elementus, pvz., lenteles ir mygtukus, naudojant „JavaScript“, gali būti sudėtinga priskirti tiems elementams unikalius ID. Tai ypač svarbu, kai kiekvienai lentelės eilutei reikalingas unikalus mygtukas atskiroms sąveikoms. Kūrėjai dažnai susiduria su problemomis bandydami priskirti dinaminius ID vidinis HTML ląstelės.

Šiuo atveju tikslas yra sukurti lentelės eilutes iš JSON objekto ir kiekvienoje eilutėje esančiam mygtukui dinamiškai priskirti unikalų ID. Tačiau paplitę metodai, kuriuose naudojami šabloniniai literalai vidinis HTML gali neveikti taip, kaip tikėtasi. Dėl to vėliau scenarijuje gali kilti problemų bandant nuorodas į tuos mygtukus arba su jais sąveikauti.

Problema kyla dėl „JavaScript“ procesų vidinis HTML ir šabloniniai literalai. Be tinkamo požiūrio, mygtukas id bus rodomas neteisingai arba nepavyks dinamiškai atnaujinti, todėl bus neįmanoma nukreipti veiksmų pagal konkrečias eilutes. Tai dažna dinaminių lentelių generavimo klaida.

Šiame straipsnyje išsiaiškinsime, kaip išspręsti šią problemą tinkamai priskiriant dinaminius ID mygtukams lentelės langeliuose, naudojant metodą, kuris užtikrina, kad mygtukų ID kiekvienoje eilutėje būtų unikalus. Taip pat pateiksime veikiantį sprendimą, kurį galėsite pritaikyti savo projektuose.

Dinaminės lentelės eilutės ir mygtuko ID generavimas JavaScript

Dinamiškai kuriant sąsają, unikalių HTML elementų ID generavimas dažnai yra labai svarbus tvarkant vartotojo sąveiką, ypač tais atvejais, kai reikia atskirti kelis mygtukus arba įvesties laukus. Aukščiau aptarti scenarijai parodo, kaip dinamiškai kurti lentelės eilutes ir mygtukus, kiekvienam mygtukui priskiriant unikalų ID, atitinkantį jo eilutę lentelėje. Naudodami „JavaScript“ kilpas ir eilučių sujungimą, galime užtikrinti, kad kiekvienas mygtukas turėtų unikalų identifikatorių, pvz., „testbutton0“, „testbutton1“ ir pan. Tai leidžia lengvai identifikuoti mygtuką, kuris suaktyvina konkretų įvykį, todėl tai yra praktiškas būdas kurti dinaminį turinį.

Viena iš pagrindinių šiame pavyzdyje naudojamų funkcijų yra table.insertRow(), kuris įterpia naujas eilutes į jau esamą HTML lentelę. Kiekvienai ciklo iteracijai į lentelę pridedama nauja eilutė, o toje eilutėje sukuriame du langelius: vieną darbuotojo vardui ir kitą mygtukui. Antroji ląstelė naudoja vidinis HTML norėdami įterpti mygtuką ir jo dinamiškai sugeneruotą ID. Tačiau naudojant vidinis HTML elementų kūrimas turi savo apribojimų, ypač kai kalbama apie kintamųjų, pvz., mygtukų ID, nuorodas, dėl kurių gali atsirasti klaidų, jei jie netinkamai tvarkomi.

Naudojamas patikimesnis metodas, parodytas antrajame sprendime document.createElement() Norėdami sukurti HTML elementus tiesiogiai naudodami „JavaScript“. Šis metodas leidžia geriau valdyti elementų kūrimą ir leidžia sukurti saugesnį, moduliškesnį kodą. Sukūrus mygtukus programiškai ir priskiriant ID dinamiškai naudojant „JavaScript“, šis sprendimas leidžia išvengti galimų problemų, kurias sukelia vidinis HTML ir suteikia švaresnį bei saugesnį būdą kurti turinį. Be to, tai palengvina įvykių klausytojų įtraukimą tiesiai prie mygtukų naudojant addEventListener(), kuri padeda išvengti tiesioginių įvykių tvarkytojų.

Galiausiai, įtraukimas event.target.id yra labai svarbus norint nustatyti, kuris mygtukas buvo paspaustas. Ši įvykio nuosavybė užfiksuoja įvykį suaktyvinusio elemento ID, kad būtų galima tiksliai valdyti sąveikas. Pavyzdžiui, spustelėjus mygtuką, doSmth() funkcija įspėja mygtuko ID, o tai padeda užtikrinti, kad būtų atliktas teisingas veiksmas, atsižvelgiant į konkretų spustelėjusį mygtuką. Dėl šio metodų derinio – dinaminio eilučių kūrimo, unikalaus ID priskyrimo ir įvykių tvarkymo – jis yra galingas sprendimas kuriant interaktyvias, duomenimis pagrįstas lenteles priekinėje dalyje.

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>

Dinaminio ID generavimo ir sąveikos tobulinimas „JavaScript“ lentelėse

Dinamiškai generuojant lentelės turinį naudojant „JavaScript“ dažnai nepastebimas aspektas yra mastelio ir priežiūros galimybė. Didėjant lentelės eilučių skaičiui, našumas gali būti paveiktas, ypač jei DOM nuolat atnaujinamas arba perkuriamas. Norėdami optimizuoti našumą, galite sumažinti tiesioginių DOM manipuliacijų skaičių, pirmiausia atmintyje sukūrę visą lentelės struktūrą, naudodami dokumento fragmentą, prieš pridėdami ją prie DOM. Tai sumažina pertvarkymo ir perdažymo procesus, kurie gali sulėtinti didelio masto programas.

Kitas svarbus dinaminių lentelių generavimo elementas yra tai, kaip tvarkote įvykių delegavimą. Nors atskirų įvykių klausytojų pridėjimas prie kiekvieno mygtuko puikiai tinka mažesnėms lentelėms, dėl to gali kilti našumo problemų naudojant didesnius duomenų rinkinius. Vietoj to, naudodami įvykių delegavimą, galite klausytis įvykių pirminiame elemente (pvz., lentelėje) ir efektyviau apdoroti mygtukų paspaudimus. Tokiu būdu prie lentelės pridedate tik vieną įvykių klausytoją ir pagal spustelėto elemento ID galite nustatyti, kokių veiksmų reikia imtis.

Galiausiai, prieinamumas yra dar vienas veiksnys, kurio nereikėtų pamiršti. Dinamiškai generuojant mygtukus ar kitus interaktyvius elementus būtina užtikrinti, kad kiekvienas elementas būtų pasiekiamas visiems vartotojams, įskaitant tuos, kurie naudojasi pagalbinėmis technologijomis. Pridedant atitinkamą arijos etiketės arba vaidmenis mygtukus, galite suteikti visapusiškesnę vartotojo patirtį. Be to, lentelės testavimas naudojant ekrano skaitytuvus arba klaviatūros naršymą gali padėti atskleisti visas problemas, susijusias su elementų sąveika dinamiškesnėje, prieinamesnėje žiniatinklio programoje.