Exemplu JavaScript InnerHTML
Scris de César Krall
Codificare aprenderaprogramar.com: CU01139E
EXERCITIU REZOLVAT CU JAVASCRIPT INTERIOR
În versiunea anterioară a cursului am văzut sintaxa și utilizarea de bază a innerHTML în JavaScript. Acum vom propune și vom da soluția unui exercițiu în care încercăm să folosim mai avansat innerHTML. Mai exact, având în vedere un tabel cu date, vom vedea cum putem face datele editabile.
DECLARAȚIE DE EXERCITARE
Cu acest exercițiu dorim, pe de o parte, să folosim cunoștințele dobândite de-a lungul cursului și, pe de altă parte, să ne obișnuim cu ideea că va trebui întotdeauna să căutăm informații suplimentare pentru a rezolva unele întrebări pe care nu le cunoaștem. a priori. Când lucrați în dezvoltarea web, este imposibil să cunoașteți toată sintaxa și instrucțiunile posibile, proprietățile etc. și, prin urmare, este necesar să consultăm cărți, reviste sau pagini web pentru a obține informații suplimentare la cunoștința noastră.
Declarația exercițiului este următoarea:
O pagină web încarcă un tabel cu date privind conținutul nutrițional al alimentelor, după cum se arată mai jos:
| Coacăze | 49 | 0,2 | 0,4 | 12.7 | Editați | × |
| Pătlagină | 90 | 0,3 | 1.0 | 23.5 | Editați | × |
| cireașă | 46 | 0,4 | 0,9 | 10.9 | Editați | × |
| căpșună | 37 | 0,5 | 0,8 | 8.3 | Editați | × |
Când faceți clic pe Editați textul din coloana Acțiuni, se doresc următoarele:
a) Textul acelei coloane care pune> în albastru, va fi înlocuit cu textul> în gri sau negru.
b) Datele din rândul corespunzător vor deveni casete de text editabile astfel încât utilizatorul să poată modifica datele din acel rând.
c) Textul ar trebui să apară în partea de jos a tabelului: și două butoane: Acceptați și Anulați, pe care utilizatorul poate face clic pentru a accepta modificările sau pentru a anula.
Dacă utilizatorul dă clic pe butonul Acceptă, datele rândului care se editează trebuie trimise către o adresă URL de destinație prin metoda get. De exemplu, dacă adresa URL de destinație este aprenderaprogramar.com și edităm rândul corespunzător căpșunii și apăsăm pe accept, browserul ar trebui să ne trimită la o adresă URL ca aceasta: