InnerHTML JavaScript példa
Írta: César Krall
Az aprenderaprogramar.com kódolása: CU01139E
BELSŐ JAVASCRIPT -EL MEGOLDOTT GYAKORLAT
A tanfolyam előző részében láthattuk a belső HTML szintaxisát és alapvető használatát a JavaScript-ben. Most javaslatot teszünk és megoldást adunk egy gyakorlatra, amelynek során megpróbáljuk fejlettebben használni a belsőHTML-t. Pontosabban, egy táblázatot adva, megnézzük, hogyan lehet az adatokat szerkeszthetővé tenni.
GYAKORLATI NYILATKOZAT
Ezzel a gyakorlattal egyrészt szeretnénk felhasználni a tanfolyam során megszerzett ismereteket, másrészt megszokni azt a gondolatot, hogy mindig további információkat kell keresnünk néhány olyan kérdés megoldásához, amelyeket nem ismerünk eleve . A webfejlesztés során lehetetlen megismerni az összes szintaxist és a lehetséges utasításokat, tulajdonságokat stb. és ezért könyvekhez, folyóiratokhoz vagy weboldalakhoz kell fordulni további információk megszerzése érdekében.
A gyakorlat megállapítása a következő:
Egy weboldal betölti az élelmiszerek tápértékére vonatkozó adatokat tartalmazó táblázatot, az alábbiak szerint:
| Áfonya | 49 | 0.2 | 0.4 | 12.7 | Szerkesztés |
| Főzőbanán | 90 | 0,3 | 1.0 | 23.5 | Szerkesztés |
| Cseresznye | 46 | 0.4 | 0.9 | 10.9 | Szerkesztés |
| Eper | 37 | 0.5 | 0.8 | 8.3 | Szerkesztés |
Ha a Műveletek oszlopban található Szerkesztés gombra kattint, a következőket kívánja elérni:
a) Az oszlop szövege, amely> kék színnel jelenik meg, helyébe a> szürke vagy fekete szöveg lép.
b) A megfelelő sor adatai válnak szerkeszthető szövegmezők hogy a felhasználó módosítsa az adott sor adatait.
c) A szövegnek a táblázat alján kell megjelennie: és két gomb: Elfogadás és Mégse, amelyekre a felhasználó kattintva elfogadhatja a módosításokat vagy törölheti.
Ha a felhasználó az Elfogadás gombra kattint, a szerkesztendő sor adatait a get metódussal el kell küldeni a cél URL-re. Például, ha a cél URL az aprenderaprogramar.com, és mi az Epernek megfelelő sort szerkesztjük, és megnyomjuk az Elfogadás gombot, a böngészőnek el kell küldenie egy ilyen URL-re: