Această postare de blog va demonstra procesul de creare a unui tabel dinamic în JavaScript.
Cum se creează un tabel dinamic în JavaScript?
Să vedem un exemplu care explică cum va fi creat un tabel dinamic în JavaScript.
Exemplu
Pentru a începe, scrieți următoarele rânduri într-un nou document HTML pentru a crea un formular care preia date și apoi le afișează într-un tabel adăugându-l dinamic:
< div id = 'forma mea' >
< h4 > Completați formularul de mai jos : h4 >
< eticheta > Nume : eticheta >
< tip de introducere = 'text' id = 'Nume' >< br >< br >
< eticheta > Gen : eticheta >
< tip de introducere = 'text' id = 'gen' >< br >< br >
< eticheta > Desemnare : eticheta >
< tip de introducere = 'text' id = 'desemnare' >< br >< br >
< eticheta > Alăturarea Data : eticheta >
< tip de introducere = 'Data' id = 'Data' >< br >< br >
< ID-ul butonului = 'adăuga' valoare = 'Adăuga' > Adăugați date la tabel buton >
div >
În fragmentul de cod de mai sus:
- Mai întâi, creați un titlu „ Completați formularul de mai jos: ”.
- Creați câmpuri de introducere pentru „ Nume ”, “ Gen ”, “ Desemnare ', și ' JoiningDate „cu ID-urile atribuite „ Nume ”, “ gen ”, “ desemnare ', și ' Data ” respectiv, pentru a prelua valorile de intrare de la utilizator.
- Aceste ID-uri sunt folosite pentru a obține referința elementelor în JavaScript.
- Apoi, creați un buton cu „ onclick ” proprietate care va numi „ addTableRow() ” într-un fișier script, pentru a adăuga și afișa datele într-un tabel:
Aici, în fișierul HTML, scrieți aceste linii de cod pentru a crea o structură de tabel, în care datele vor fi adăugate dinamic:
< div >
< h4 > Dosarul angajaților b > h4 >
< centru >
< ID tabel = 'tableData' frontieră = '1' umplutură celulară = 'Două' >
< tr >
< td >< b > Nume b > td >
< td >< b > Gen b > td >
< td >< b > Desemnare b > td >
< td >< b > Data aderării b > td >
tr >
masa >
centru >
div >
În codul de mai sus:
- Creați un tabel cu id-ul „ tableData ” care va fi folosit în fișierul script pentru a obține referința acestui tabel și apoi adăugați datele la acesta.
- Tabelul conține patru coloane, „ Nume ”, “ Gen ”, “ Desemnare ', și ' Data aderării ” care va stoca date în funcție de numele coloanelor.
Rularea fișierului HTML va avea ca rezultat următoarea ieșire a browserului:
Să adăugăm funcționalități pentru a crea tabele în mod dinamic folosind JavaScript. În fișierul script sau eticheta, utilizați codul de mai jos care va crea un tabel dinamic:
funcţie addTableRow ( ) {a fost Nume = document. getElementById ( 'Nume' ) ;
a fost gen = document. getElementById ( 'gen' ) ;
a fost desemnare = document. getElementById ( 'desemnare' ) ;
a fost Data = document. getElementById ( 'Data' ) ;
a fost masa = document. getElementById ( 'tableData' ) ;
a fost rowCount = masa. rânduri . lungime ;
a fost rând = masa. insertRow ( rowCount ) ;
rând. insertCell ( 0 ) . innerHTML = Nume. valoare ;
rând. insertCell ( 1 ) . innerHTML = gen. valoare ;
rând. insertCell ( Două ) . innerHTML = desemnare. valoare ;
rând. insertCell ( 3 ) . innerHTML = Data. valoare ;
}
În fragmentul de mai sus:
- Mai întâi, definiți o funcție „ addTableRow() ” care va declanșa evenimentul clic al butonului HTML.
- Apoi, obțineți referința tuturor câmpurilor de intrare, unul câte unul, folosind ID-urile atribuite, folosind „ getelementById() ” și stocați-le în variabile.
- Aceste variabile vor fi folosite pentru a obține valoarea câmpurilor de intrare folosind codul HTML „ valoare ” și setați-le în celulele individuale din tabel utilizând „ innerHTML ” proprietate.
- Adăugați rânduri într-un tabel utilizând „ masă.rânduri.lungime ” și apoi stocați valori în ea.
Ieșire
Rezultatul de mai sus indică faptul că tabelul dinamic este creat cu succes prin adăugarea de date într-un formular folosind JavaScript.
Concluzie
Tabelul dinamic este creat folosind diferite proprietăți HTML cu metode predefinite JavaScript. Mai întâi, creați un formular într-un fișier HTML și apoi obțineți referința câmpurilor folosind metode predefinite JavaScript, cum ar fi „ getElementById() ” și apoi recuperați valorile lor introduse folosind „ valoare ” proprietate. Setați aceste valori în coloanele respective ale unui tabel utilizând „ innerHTML ” proprietate. Această postare de blog demonstrează procesul de creare a unui tabel dinamic în JavaScript.