Come creare tabella dinamicamente in javascript
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, scrivere le seguenti righe in un nuovo documento HTML per creare un modulo che prende i dati e quindi lo mostra in una tabella aggiungendolo dinamicamente:
Compilare il modulo seguente:
Nel frammento di codice sopra:
- Innanzitutto, crea un titolo "Compilare il modulo seguente:".
- Crea campi di input per "Nome","Genere","Designazione", E "Unioning Date"Con l'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à il"AddAbleRow ()"Funzione in un file di script, per aggiungere e mostrare i dati in una tabella:
Qui, nel file HTML, scrivere queste righe di codice per creare una struttura della tabella, in cui i dati verranno aggiunti dinamicamente:
Record dei dipendenti
| Nome | Genere | Designazione | Data di iscrizione |
Nel codice sopra:
- Crea una tabella con l'ID "Tabledata"Verrà utilizzato nel file di script per ottenere il riferimento di questa tabella e quindi aggiungere i dati ad essa.
- La tabella contiene quattro colonne, "Nome","Genere","Designazione", E "Data di iscrizione"Ciò 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 di tabelle in modo dinamico usando JavaScript. Nel file di script o tag, utilizzare il codice seguente che creerà una tabella dinamicamente:
funzione addtablerow ()var name = document.getElementById ("nome");
Var Gender = Documento.getElementById ("genere");
var designation = documento.getElementById ("designazione");
var date = documento.getElementById ("data");
VAR TABLE = Documento.getElementById ("TableData");
var rowcount = table.file.lunghezza;
var row = tabella.Insertrow (RowCount);
riga.insertCell (0).InnerHtml = nome.valore;
riga.insertCell (1).InnerHtml = genere.valore;
riga.insertCell (2).InnerHtml = designazione.valore;
riga.insertCell (3).InnerHtml = data.valore;
Nello snippet sopra:
- Innanzitutto, definire una funzione "AddAbleRow ()"Ciò attiverà l'evento click del pulsante HTML.
- Quindi, ottieni il riferimento di tutti i campi di input uno per uno usando i rispettivi ID assegnati usando il "getElementById ()"Metodo e memorizzali in variabili.
- Queste variabili verranno utilizzate per ottenere il valore dei campi di input usando HTML "valore"Proprietà e impostarle nelle singole celle nella tabella usando il"Innerhtml" proprietà.
- Aggiungi righe in una tabella utilizzando il "tavolo.file.lunghezza"Proprietà e quindi memorizzare i valori in esso.
Produzione
L'output sopra indica che la tabella dinamica viene 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, creare un modulo in un file HTML e quindi ottenere il riferimento dei campi utilizzando i metodi predefiniti JavaScript come "getElementById ()"Metodo e quindi recuperare i valori immessi usando il"valore" proprietà. Imposta questi valori nelle rispettive colonne di una tabella usando "Innerhtml" proprietà. Questo post sul blog dimostra il processo per la creazione di una tabella dinamica in JavaScript.