Ez a blogbejegyzés bemutatja a dinamikus táblázat létrehozásának folyamatát JavaScriptben.
Hogyan lehet dinamikusan táblázatot létrehozni JavaScriptben?
Lássunk egy példát, amely elmagyarázza, hogyan kell dinamikus táblázatot létrehozni JavaScriptben.
Példa
Kezdésként írja be a következő sorokat egy új HTML dokumentumba, hogy létrehozzon egy űrlapot, amely adatokat vesz, majd dinamikusan hozzáadva megjeleníti azokat táblázatban:
< div id = 'az én űrlapom' >
< h4 > Töltse ki az alábbi űrlapot : h4 >
< címke > Név : címke >
< bemeneti típus = 'szöveg' id = 'név' >< br >< br >
< címke > Nem : címke >
< bemeneti típus = 'szöveg' id = 'nem' >< br >< br >
< címke > Kijelölés : címke >
< bemeneti típus = 'szöveg' id = 'kijelölés' >< br >< br >
< címke > Csatlakozás Dátum : címke >
< bemeneti típus = 'dátum' id = 'dátum' >< br >< br >
< gomb id = 'hozzáadás' érték = 'Hozzáadás' > Adatok hozzáadása a táblázathoz gomb >
div >
A fenti kódrészletben:
- Először hozzon létre egy címsort ' Töltse ki az alábbi űrlapot: ”.
- Hozzon létre beviteli mezőket a következőhöz: Név ”, „ Nem ”, „ Kijelölés ”, és „ Csatlakozási dátum 'hozzárendelt azonosítóval' név ”, „ neme ”, „ kijelölés ”, és „ dátum ”, illetve a bemeneti értékeket a felhasználótól veszi.
- Ezek az azonosítók az elemek hivatkozásának lekérésére szolgálnak a JavaScriptben.
- Ezután hozzon létre egy gombot a „ kattintásra ' ingatlan, amely a ' addTableRow() ” függvényt egy parancsfájlban, az adatok táblázatban való hozzáadásához és megjelenítéséhez:
Ide, a HTML-fájlba írja be ezeket a kódsorokat, hogy létrehozzon egy táblázatstruktúrát, ahol az adatok dinamikusan kerülnek hozzáadásra:
< div >
< h4 > Alkalmazotti nyilvántartás b > h4 >
< központ >
< táblázat id = 'táblaadatok' határ = '1' cellatömítés = 'két' >
< tr >
< td >< b > Név b > td >
< td >< b > Nem b > td >
< td >< b > Kijelölés b > td >
< td >< b > Csatlakozási dátum b > td >
tr >
asztal >
központ >
div >
A fenti kódban:
- Hozzon létre egy táblázatot az azonosítóval táblázatData ”, amelyet a szkriptfájlban használunk a táblázat hivatkozásának lekéréséhez, majd hozzáadjuk az adatokat.
- A táblázat négy oszlopot tartalmaz: Név ”, „ Nem ”, „ Kijelölés ”, és „ Csatlakozási dátum ”, amely az oszlopnevek szerint tárolja az adatokat.
A HTML fájl futtatása a következő böngészőkimenetet eredményezi:
Adjunk hozzá funkciókat a táblázatok dinamikus létrehozásához JavaScript használatával. A szkriptfájlban vagy címkében használja az alábbi kódot, amely dinamikusan hoz létre egy táblázatot:
funkció addTableRow ( ) {volt név = dokumentum. getElementById ( 'név' ) ;
volt neme = dokumentum. getElementById ( 'nem' ) ;
volt kijelölés = dokumentum. getElementById ( 'kijelölés' ) ;
volt dátum = dokumentum. getElementById ( 'dátum' ) ;
volt asztal = dokumentum. getElementById ( 'táblaadatok' ) ;
volt sorszám = asztal. sorokat . hossz ;
volt sor = asztal. insertRow ( sorszám ) ;
sor. insertCell ( 0 ) . innerHTML = név. érték ;
sor. insertCell ( 1 ) . innerHTML = neme. érték ;
sor. insertCell ( két ) . innerHTML = kijelölés. érték ;
sor. insertCell ( 3 ) . innerHTML = dátum. érték ;
}
A fenti részletben:
- Először definiáljon egy függvényt ' addTableRow() ', amely elindítja a HTML gomb kattintási eseményét.
- Ezután kérje le egyenként az összes beviteli mező hivatkozását a hozzájuk rendelt azonosítók használatával a ' getelementById() ” módszert, és tárolja azokat változókban.
- Ezeket a változókat használjuk a beviteli mezők értékének lekérésére a HTML segítségével. érték ” tulajdonságot, és állítsa be őket a táblázat egyes celláiba a „ innerHTML ' ingatlan.
- Adjon hozzá sorokat egy táblázathoz a ' táblázat.sorok.hossz ” tulajdonságot, majd tároljon benne értékeket.
Kimenet
A fenti kimenet azt jelzi, hogy a dinamikus tábla létrehozása sikeresen megtörtént adatok hozzáadásával egy űrlapon JavaScript használatával.
Következtetés
A dinamikus táblázat a különböző HTML-tulajdonságokkal, JavaScript előre definiált módszerekkel jön létre. Először hozzon létre egy űrlapot egy HTML-fájlban, majd kérje le a mezők hivatkozását JavaScript előre meghatározott módszerekkel, például a ' getElementById() ” módszerrel, majd a beírt értékeket a „ érték ' ingatlan. Állítsa be ezeket az értékeket a táblázat megfelelő oszlopaiban a „ innerHTML ' ingatlan. Ez a blogbejegyzés bemutatja a dinamikus táblázat létrehozásának folyamatát JavaScriptben.