Jak dynamicznie tworzyć tabelę w JavaScript

Tabela dynamiczna to tabela, która zmienia liczbę wierszy w zależności od danych wejściowych w czasie wykonywania. Niektóre strony internetowe lub aplikacje online, takie jak witryny biznesowe, muszą dynamicznie utworzyć tabelę podczas dodawania danych lub informacji. Można to zrobić za pomocą JavaScript, ponieważ JavaScript jest językiem skryptowym, który używa dynamicznego pisania.

Ten post na blogu zademonstruje proces tworzenia dynamicznej tabeli w JavaScript.

Jak dynamicznie utworzyć tabelę w JavaScript?

Zobaczmy przykład wyjaśniający, w jaki sposób zostanie utworzona dynamiczna tabela w JavaScript.

Przykład
Aby rozpocząć, napisz następujące wiersze w nowym dokumencie HTML, aby utworzyć formularz, który przyjmuje dane, a następnie pokazuje go w tabeli, dodając je dynamicznie:

Wypełnij poniższy formularz:

Nazwa:



Płeć:



Przeznaczenie:



Data dołączenia:



Dodaj dane do tabeli

W powyższym fragmencie kodu:

• Najpierw stwórz nagłówek „Wypełnij poniższy formularz:".
• Utwórz pola wejściowe dla „Nazwa”,„Płeć”,„Przeznaczenie", I "Dołączanie”Z przypisanym identyfikatorem„nazwa”,„płeć”,„Przeznaczenie", I "data”Odpowiednio, aby przejąć wartości wejściowe od użytkownika.
• Te identyfikatory są używane do uzyskania odniesienia elementów w JavaScript.
• Następnie utwórz przycisk z „na kliknięcie„Nieruchomość, która zadzwoni„addTablerow ()„Funkcja w pliku skryptu, aby dodać i wyświetlić dane w tabeli:

Tutaj, w pliku HTML, napisz te wiersze kodu, aby utworzyć strukturę tabeli, w której dane zostaną dynamicznie dodane:

Rekord pracownika

Nazwa

Płeć

Przeznaczenie

Data dołączenia

W powyższym kodzie:

• Utwórz tabelę z identyfikatorem „Tabledata„To zostanie użyte w pliku skryptu, aby uzyskać odniesienie do tej tabeli, a następnie dodać do niej dane.
• Tabela zawiera cztery kolumny „Nazwa”,„Płeć”,„Przeznaczenie", I "Data dołączenia„To będzie przechowywać dane zgodnie z nazwami kolumn.

Uruchomienie pliku HTML spowoduje następujące dane wyjściowe przeglądarki:

Dodajmy funkcjonalność dynamicznego tworzenia tabel za pomocą JavaScript. W pliku skryptu lub znaczniku użyj poniższego kodu, który dynamicznie utworzy tabelę:

funkcja addtablerow ()
var name = dokument.getElementById („Nazwa”);
var gender = dokument.getElementById („płeć”);
var oznaczenie = dokument.getElementById („oznaczenie”);
var date = dokument.getElementById („data”);
var tabela = dokument.getElementById („strededata”);
var rowCount = tabela.wydziwianie.długość;
var row = tabela.insertrow (RowCount);
wiersz.InsertCell (0).innerhtml = nazwa.wartość;
wiersz.InsertCell (1).InnerHtml = płeć.wartość;
wiersz.InsertCell (2).InnerHtml = oznaczenie.wartość;
wiersz.InsertCell (3).innerHtml = data.wartość;

W powyższym fragmencie:

• Najpierw zdefiniuj funkcję „addTablerow ()„To wywoła zdarzenie kliknięcia przycisku HTML.
• Następnie uzyskaj odniesienie wszystkich pól wejściowych jeden po drugim za pomocą odpowiednich przypisanych identyfikatorów za pomocą „getElementById ()„Metoda i przechowuj je w zmiennych.
• Te zmienne zostaną użyte do uzyskania wartości pól wejściowych za pomocą HTML ”wartość”Właściwość i ustaw je w poszczególnych komórkach w tabeli za pomocą„InnerHtml" nieruchomość.
• Dodaj wiersze w tabeli wykorzystującym „tabela.wydziwianie.długość„Własność, a następnie przechowuj w niej wartości.

Wyjście

Powyższe wyjście wskazuje, że tabela dynamiczna jest pomyślnie tworzona przez dodanie danych w formularzu za pomocą JavaScript.

Wniosek

Tabela dynamiczna jest tworzona przy użyciu różnych właściwości HTML z predefiniowanymi metodami JavaScript. Najpierw utwórz formularz w pliku HTML, a następnie uzyskaj odniesienie do pól za pomocą predefiniowanych metod JavaScript, takich jak „getElementById ()”Metoda, a następnie odzyskaj wprowadzone wartości za pomocą„wartość" nieruchomość. Ustaw te wartości w odpowiednich kolumnach tabeli za pomocą „InnerHtml" nieruchomość. Ten post na blogu pokazuje proces tworzenia dynamicznej tabeli w JavaScript.