Questo post sul blog dimostrerà il processo per la creazione di una tabella dinamica in JavaScript.
Come creare una tabella dinamicamente in JavaScript?
Vediamo un esempio che spiega come verrà creata una tabella dinamica in JavaScript.
Esempio
Per iniziare, scrivi le seguenti righe in un nuovo documento HTML per creare un modulo che prenda i dati e poi li mostri in una tabella aggiungendoli dinamicamente:
< ID div = 'mioforma' >
< h4 > Compila il modulo sottostante : h4 >
< etichetta > Nome : etichetta >
< tipo di ingresso = 'testo' id = 'nome' >< fratello >< fratello >
< etichetta > Genere : etichetta >
< tipo di ingresso = 'testo' id = 'Genere' >< fratello >< fratello >
< etichetta > Designazione : etichetta >
< tipo di ingresso = 'testo' id = 'designazione' >< fratello >< fratello >
< etichetta > Unire Data : etichetta >
< tipo di ingresso = 'Data' id = 'Data' >< fratello >< fratello >
< ID pulsante = 'Inserisci' valore = 'Aggiungere' > Aggiungi dati alla tabella pulsante >
div >
Nello snippet di codice sopra:
- Innanzitutto, crea un'intestazione ' Compila il modulo sottostante: ”.
- Crea campi di input per ' Nome ”, “ Genere ”, “ Designazione ', e ' Data di adesione 'con ID assegnato' nome ”, “ Genere ”, “ designazione ', e ' Data ” rispettivamente, per prendere i valori di input dall'utente.
- Questi ID vengono utilizzati per ottenere il riferimento degli elementi in JavaScript.
- Quindi, crea un pulsante con ' al clic ” proprietà che chiamerà “ addTableRow() ” funzione in un file di script, per aggiungere e mostrare i dati in una tabella:
Qui, nel file HTML, scrivi queste righe di codice per creare una struttura di tabella, dove i dati verranno aggiunti dinamicamente:
< div >
< h4 > Registro dei dipendenti b > h4 >
< centro >
< id tabella = 'tabellaDati' confine = '1' cellpadding = 'Due' >
< tr >
< td >< b > Nome b > td >
< td >< b > Genere b > td >
< td >< b > Designazione b > td >
< td >< b > Data di adesione b > td >
tr >
tavolo >
centro >
div >
Nel codice sopra:
- Crea una tabella con l'id ' tableData ” che verrà utilizzato nel file di script per ottenere il riferimento di questa tabella e quindi aggiungervi i dati.
- La tabella contiene quattro colonne, ' Nome ”, “ Genere ”, “ Designazione ', e ' Data di adesione ” che memorizzerà i dati in base ai nomi delle colonne.
L'esecuzione del file HTML comporterà il seguente output del browser:
Aggiungiamo funzionalità per la creazione dinamica di tabelle utilizzando JavaScript. Nel file di script o nel tag, utilizza il codice seguente che creerà una tabella in modo dinamico:
funzione addTableRow ( ) {era nome = documento. getElementById ( 'nome' ) ;
era Genere = documento. getElementById ( 'Genere' ) ;
era designazione = documento. getElementById ( 'designazione' ) ;
era Data = documento. getElementById ( 'Data' ) ;
era tavolo = documento. getElementById ( 'tabellaDati' ) ;
era rowCount = tavolo. righe . lunghezza ;
era riga = tavolo. insertRow ( rowCount ) ;
riga. insertCell ( 0 ) . innerHTML = nome. valore ;
riga. insertCell ( 1 ) . innerHTML = Genere. valore ;
riga. insertCell ( Due ) . innerHTML = designazione. valore ;
riga. insertCell ( 3 ) . innerHTML = Data. valore ;
}
Nello snippet sopra:
- Innanzitutto, definisci una funzione ' addTableRow() ” che attiverà l'evento clic del pulsante HTML.
- Quindi, ottieni il riferimento di tutti i campi di input uno per uno utilizzando i rispettivi ID assegnati utilizzando ' getelementoPerId() ” e memorizzarli in variabili.
- Queste variabili verranno utilizzate per ottenere il valore dei campi di input utilizzando l'HTML ' valore ” e impostarli nelle singole celle della tabella utilizzando la proprietà “ innerHTML ' proprietà.
- Aggiungere righe in una tabella utilizzando il ' tabella.righe.lunghezza ” e quindi memorizzare i valori al suo interno.
Produzione
L'output precedente indica che la tabella dinamica è stata creata correttamente aggiungendo dati in un modulo utilizzando JavaScript.
Conclusione
La tabella dinamica viene creata utilizzando le diverse proprietà HTML con metodi predefiniti JavaScript. Innanzitutto, crea un modulo in un file HTML e quindi ottieni il riferimento dei campi utilizzando metodi predefiniti JavaScript come ' getElementById() ” e quindi recuperare i valori immessi utilizzando il metodo “ valore ' proprietà. Imposta questi valori nelle rispettive colonne di una tabella utilizzando il ' innerHTML ' proprietà. Questo post sul blog mostra il processo per la creazione di una tabella dinamica in JavaScript.