Ez a kézikönyv JavaScriptet használ a sorok táblázathoz való hozzáadásának eljárásához.
Hogyan adjunk sort a HTML-táblázathoz JavaScript használatával?
Ha egy sort szeretne hozzáadni a táblázathoz, használja a következő eljárásokat:
Nézzünk meg minden egyes eljárást külön-külön.
1. módszer: Sor hozzáadása a HTML-táblázathoz az insertRow() módszerrel
Az ' insertRow() ” módszerrel új sort adunk a táblázat elejére. Létrehoz egy új
Ha a sort a táblázat utolsó/végére kívánja hozzáadni, akkor adja át az indexet ' -1 ” érvként.
Szintaxis
Használja a következő szintaxist sorok hozzáadásához a táblázatban az insertRow() metódus segítségével:
asztal. insertRow ( index ) ;
Itt, ' index ” jelzi azt a helyet, ahová új sort kíván felvenni, például a táblázat végén vagy az elején.
1. példa: Sor hozzáadása a táblázat tetejére/elejére
Itt létrehozunk egy táblázatot és egy gombot egy HTML fájlban a HTML használatával
< tr >
< td > Sor cellája 1 td >
< td > Sor cellája 1 td >
< td > Sor cellája 1 td >
tr >
< tr >
< td > Sor cellája két td >
< td > Sor cellája két td >
< td > Sor cellája két td >
tr >
< tr >
< td > Sor cellája 3 td >
< td > Sor cellája 3 td >
< td > Sor cellája 3 td >
tr >
asztal >
< br >
Ezután hozzon létre egy gombot, amely meghívja a ' sor hozzáadása() ” gombra kattintáskor:
< gomb típusa = 'gomb' kattintásra = 'sor hozzáadása()' > Kattintson a sor hozzáadásához a táblázat tetején gomb >A táblázat stílusozásához minden cella és táblázat szegélyét az alábbiak szerint állítjuk be:
táblázat, td {határ : 1px tömör fekete ;
}
Most sorokat adunk hozzá a táblázathoz a táblázat tetején/elején JavaScript használatával. Ehhez definiáljon egy '' nevű függvényt sor hozzáadása() ', amelyet a gomb onclick() eseménye hív meg. Ezután töltse le a létrehozott táblázatot a ' getElementById() ” módszerrel. Ezt követően hívja a „ insertRow() ' módszert a ' 0 ” index, mint paraméter, amely azt jelzi, hogy a sor a táblázat elejére kerül hozzáadásra.
Ezután hívja meg a „ insertCell() ” módszert olyan indexek átadásával, amelyek megmutatják, hány cellát adunk a sorhoz. Végül adja hozzá a szöveges adatokat vagy a cellákban lévő szöveget a „ innerHTML ' ingatlan:
functionaddRow ( ) {var tableRow = dokumentum. getElementById ( 'asztal' ) ;
sor volt = táblázatSor. insertRow ( 0 ) ;
ahol cell1 = sor. insertCell ( 0 ) ;
ahol cell2 = sor. insertCell ( 1 ) ;
ahol cella3 = sor. insertCell ( két ) ;
cella1. innerHTML = 'Új sor cellája' ;
cella2. innerHTML = 'Új sor cellája' ;
cella3. innerHTML = 'Új sor cellája' ;
}
Amint a kimeneten látható, az új sor a meglévő táblázat tetejére kerül a gombra kattintva:
2. példa: Sor hozzáadása a táblázat végéhez
Ha egy sort szeretne beszúrni a táblázat utolsó/végére, adja át a „ -1 ' index a ' insertRow() ” módszerrel. A gombra kattintva végül hozzáadja a sort:
functionaddRow ( ) {var tableRow = dokumentum. getElementById ( 'asztal' ) ;
sor volt = táblázatSor. insertRow ( - 1 ) ;
ahol cell1 = sor. insertCell ( 0 ) ;
ahol cell2 = sor. insertCell ( 1 ) ;
ahol cella3 = sor. insertCell ( két ) ;
cella1. innerHTML = 'Új sor cellája' ;
cella2. innerHTML = 'Új sor cellája' ;
cella3. innerHTML = 'Új sor cellája' ;
}
Kimenet
Térjünk át a másik módszerre!
2. módszer: Adjon hozzá sort a HTML-táblázathoz új elem létrehozásával
Van egy másik módszer is egy sor hozzáadására egy táblázathoz, amely új elemeket hoz létre JavaScript metódusokkal, beleértve a ' createElement() ' módszer és a ' appendChild() ” módszerrel. A createElement() létrehozza a
Szintaxis
Kövesse a megadott szintaxist új elem létrehozásához egy sor hozzáadásához egy táblázathoz JavaScript használatával:
dokumentum. CreateElement ( 'tr' ) ;Itt a „ tr ” a táblázat sora.
Példa
Most ugyanazt a korábban létrehozott táblázatot fogjuk használni HTML-ben CSS-fájllal, de a JavaScript-fájlban a ' createElement() ” módszerrel. Ezután adja hozzá az adatokat vagy szöveget a cellákhoz a „ innerHTML ' ingatlan. Végül hívja meg a „ appendChild() ” metódus, amely a cellákat egy sorba, majd a sort egy táblázatba adja:
functionaddRow ( ) {var tableRow = dokumentum. getElementById ( 'asztal' ) ;
sor volt = dokumentum. CreateElement ( 'tr' ) ;
ahol cell1 = dokumentum. CreateElement ( 'td' ) ;
ahol cell2 = dokumentum. CreateElement ( 'td' ) ;
ahol cella3 = dokumentum. CreateElement ( 'td' ) ;
cella1. innerHTML = 'Új sor cellája' ;
cella2. innerHTML = 'Új sor cellája' ;
cella3. innerHTML = 'Új sor cellája' ;
sor. appendChild ( cella1 ) ;
sor. appendChild ( cella2 ) ;
sor. appendChild ( cella3 ) ;
táblázatSor. appendChild ( sor ) ;
}
A kimenet azt mutatja, hogy az új sor sikeresen hozzáadásra került a táblázat végére:
Összeállítottuk az összes módszert egy sor táblázathoz való hozzáadásához JavaScript használatával.
Következtetés
Ha egy sort szeretne hozzáadni egy táblázathoz, használja a két megközelítést: az insertRow() metódust, vagy hozzon létre egy új elemet JavaScript előre definiált metódusaival, beleértve az appendChild() metódust és a createElement() metódust. A táblázat végének elejére az insertRow() metódussal, indexek átadásával adhatunk sort. Ez a kézikönyv elmagyarázza, hogyan lehet új sort hozzáadni egy táblázathoz JavaScript használatával egy gombra kattintva.