Aquesta publicació del bloc mostrarà el procés per crear una taula dinàmica en JavaScript.
Com crear una taula dinàmicament en JavaScript?
Vegem un exemple que explica com es crearà una taula dinàmica en JavaScript.
Exemple
Per començar, escriviu les línies següents en un nou document HTML per crear un formulari que prengui dades i que després les mostri en una taula afegint-les dinàmicament:
< id div = 'la meva forma' >
< h4 > Omple el següent formulari : h4 >
< etiqueta > Nom : etiqueta >
< tipus d'entrada = 'text' id = 'nom' >< br >< br >
< etiqueta > Gènere : etiqueta >
< tipus d'entrada = 'text' id = 'gènere' >< br >< br >
< etiqueta > Designació : etiqueta >
< tipus d'entrada = 'text' id = 'designació' >< br >< br >
< etiqueta > Unir-se Data : etiqueta >
< tipus d'entrada = 'data' id = 'data' >< br >< br >
< identificador del botó = 'afegir' valor = 'Afegir' > Afegeix dades a la taula botó >
div >
Al fragment de codi anterior:
- Primer, creeu un encapçalament ' Omple el següent formulari: ”.
- Creeu camps d'entrada per a “ Nom ”, “ Gènere ”, “ Designació ”, i “ JoiningDate ' amb identificador assignat ' nom ”, “ gènere ”, “ designació ”, i “ data ” respectivament, per prendre els valors d'entrada de l'usuari.
- Aquests identificadors s'utilitzen per obtenir la referència dels elements en JavaScript.
- A continuació, creeu un botó amb el ' fent clic ” propietat que anomenarà “ addTableRow() ” funció en un fitxer de script, per afegir i mostrar les dades en una taula:
Aquí, al fitxer HTML, escriviu aquestes línies de codi per crear una estructura de taula, on les dades s'afegiran dinàmicament:
< div >
< h4 > Registre de l'empleat b > h4 >
< centre >
< identificador de la taula = 'taulaData' frontera = '1' encoixinat cel·lular = '2' >
< tr >
< td >< b > Nom b > td >
< td >< b > Gènere b > td >
< td >< b > Designació b > td >
< td >< b > Data d'incorporació b > td >
tr >
taula >
centre >
div >
En el codi anterior:
- Creeu una taula amb l'identificador ' tableData ” que s'utilitzarà al fitxer d'script per obtenir la referència d'aquesta taula i després afegir-hi les dades.
- La taula conté quatre columnes, ' Nom ”, “ Gènere ”, “ Designació ”, i “ Data d'incorporació ” que emmagatzemarà dades segons els noms de les columnes.
L'execució del fitxer HTML donarà lloc a la següent sortida del navegador:
Afegim funcionalitats per crear taules de forma dinàmica amb JavaScript. Al fitxer d'script o etiqueta, utilitzeu el codi següent que crearà una taula dinàmicament:
funció addTableRow ( ) {era nom = document. getElementById ( 'nom' ) ;
era gènere = document. getElementById ( 'gènere' ) ;
era designació = document. getElementById ( 'designació' ) ;
era data = document. getElementById ( 'data' ) ;
era taula = document. getElementById ( 'taulaData' ) ;
era rowCount = taula. files . llargada ;
era fila = taula. insertRow ( rowCount ) ;
fila. insertCell ( 0 ) . innerHTML = nom. valor ;
fila. insertCell ( 1 ) . innerHTML = gènere. valor ;
fila. insertCell ( 2 ) . innerHTML = designació. valor ;
fila. insertCell ( 3 ) . innerHTML = data. valor ;
}
En el fragment anterior:
- Primer, defineix una funció ' addTableRow() ” que activarà l'esdeveniment de clic del botó HTML.
- A continuació, obteniu la referència de tots els camps d'entrada un per un utilitzant els seus respectius identificadors assignats mitjançant el ' getelementById() ” i emmagatzemar-los en variables.
- Aquestes variables s'utilitzaran per obtenir el valor dels camps d'entrada mitjançant l'HTML ' valor ” i establiu-les a les cel·les individuals de la taula utilitzant el “ innerHTML ' propietat.
- Afegiu files a una taula utilitzant el ' longitud.taula.files ” propietat i després emmagatzemar-hi valors.
Sortida
La sortida anterior indica que la taula dinàmica s'ha creat correctament afegint dades en un formulari mitjançant JavaScript.
Conclusió
La taula dinàmica es crea utilitzant les diferents propietats HTML amb mètodes predefinits de JavaScript. Primer, creeu un formulari en un fitxer HTML i després obteniu la referència dels camps mitjançant mètodes predefinits de JavaScript com ara ' getElementById() ” i després recuperar els seus valors introduïts mitjançant el “ valor ' propietat. Establiu aquests valors a les columnes respectives d'una taula utilitzant el ' innerHTML ' propietat. Aquesta entrada al bloc mostra el procés per crear una taula dinàmica en JavaScript.