Crea tabella usando JavaScript

1. Vari tag utilizzati per creare una tabella in HTML
2. Crea una tabella usando JavaScript

Il linguaggio di programmazione JavaScript ci consente di creare e manipolare elementi DOM (Document Object Model). Ci dà molta più flessibilità e rende molto più facile per tutti lavorare con DOM, specialmente se sei uno sviluppatore di backend.

Ci sono due modi per aggiungere elementi HTML come tabelle a un documento HTML, il primo è aggiungere il tag della tabella HTML direttamente nella nostra pagina web HTML, e il secondo modo è creare l’intera tabella all’interno del nostro codice JavaScript. La seconda opzione è il modo più diffuso per creare e aggiungere la tabella al DOM.

Ma prima di approfondire come viene creata la tabella con JavaScript, cerchiamo di comprendere visivamente i vari tag di tabella utilizzati per creare una tabella e cosa significa esattamente ciascuno di questi tag. Questo ti darà una rappresentazione visiva della tabella, rendendo molto più semplice la comprensione della parte di codice più avanti in questo articolo.

Vari tag utilizzati per creare una tabella in HTML

Di seguito è riportato la lista dei tag utilizzati per creare una tabella in HTML.

1. table: Il tag HTML table rappresenta l’intera tabella in HTML. Questo è il tag di partenza della tabella all’interno del quale verranno utilizzati tutti gli altri tag relativi alla tabella (come thead, tr, td, etc) a seconda di come si vuole strutturare la tabella.
2. thead: thead sta per intestazione della tabella. Questo tag viene utilizzato per aggiungere un’intestazione alle tabelle. Di solito rappresenta la prima riga della tabella. Per aggiungere dati all’interno del tag thead, utilizziamo il tag th. Se non vuoi aggiungere un’intestazione alle tue tabelle, puoi saltare il tag thead.
3. tbody: tbody sta per table body. Questo tag rappresenta l’intero corpo o il contenuto della tabella.
4. tfoot: tfoot sta per piè di pagina. Di solito rappresenta l’ultima riga della tabella. Questo tag è facoltativo. Non usiamo questo tag così spesso.
5. tr: tr sta per riga di tabella. Rappresenta l’intera riga della tabella. Per inserire dati nella tabella all’interno dell’intestazione, del corpo o del piè di pagina della tabella, dobbiamo prima creare una riga, quindi all’interno di tale riga possiamo inserire i dati con l’aiuto del tag td.
6. th: Il th viene utilizzato solo all’interno del tag thead. Rappresenta la singola cella della riga di intestazione. Rende le intestazioni della tabella in grassetto.
7. td: td sta per dati di tabella. Rappresenta la singola cella della tabella. È simile a th, ma l’unica differenza è che th è usato solo all’interno del tag thead, e td è usato altrove. Il tag td può essere utilizzato con i tag tbody e tfoot.

Se combini tutti questi tag in forma nidificata, ovvero uno dentro l’altro, ecco come apparirà la tabella dopo che è stata creata.

Il bordo rosso rappresenta l’intera tabella. Al suo interno abbiamo 3 tag, intestazione della tabella (thead), corpo della tabella (tbody) e piè di pagina della tabella (tfoot), che sono rappresentati con il bordo verde. Per inserire dati all’interno di questi tre tag dobbiamo prima creare una riga con l’aiuto del tag tr. Questa riga è rappresentata con il bordo giallo. E poi, per inserire dati nell’intestazione della tabella, usiamo il tag th e per inserire dati nel corpo della tabella o nel piè di pagina della tabella, usiamo i tag td. È mostrato con l’aiuto del colore grigio.

Crea una tabella usando JavaScript

Per creare un elemento HTML usando JavaScript dobbiamo usare un metodo chiamato document.createElement() che prende il nome del tag che è una stringa come parametro. Ad esempio, vogliamo creare una tabella, quindi passeremo la stringa table come input al metodo createElement() document.createElement('table').

Creiamo ora la tabella sottostante interamente utilizzando JavaScript.

La tabella sopra ha 4 righe. La prima riga contiene tutta l’intestazione e le tre righe successive contengono i dati.

Di seguito abbiamo il codice HTML, CSS e JS. All’interno del nostro tag body, inizialmente non abbiamo nulla. Creeremo la nostra tabella all’interno del JavaScript e, alla fine, aggiungeremo l’intera tabella al tag body in modo che sia visibile sulla pagina web. All’interno del tag stile, abbiamo dato uno stile di base alla nostra tavola.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table{
            border-collapse: collapse;
            border-spacing: 0;
        }
        th, td{
            padding: 10px 20px;
            border: 1px solid #000;
        }
    </style>

</head>
<body id="body">

    <script src="script.js"></script>  
</body>
</html>

Per creare una tabella, creeremo prima il tag table. Quindi memorizzeremo questo tag in una variabile table in modo da poterlo utilizzare in seguito. Allo stesso modo, creeremo anche i tag thead e tbody e li memorizzeremo all’interno delle variabili. Quindi aggiungiamo thead e tbody al tag table.

let table = document.createElement('table');
let thead = document.createElement('thead');
let tbody = document.createElement('tbody');

table.appendChild(thead);
table.appendChild(tbody);

// Adding the entire table to the body tag
document.getElementById('body').appendChild(table);

Devi aggiungere o aggiungere quella tabella che hai creato in JavaScript al tag body. Dobbiamo prima ottenere il tag body HTML usando il suo id, e poi aggiungeremo la tabella usando qualcosa chiamato il metodo appendChild(). Poiché abbiamo già memorizzato la nostra tabella all’interno della variabile table, dovremo solo aggiungere la tabella che abbiamo creato da bambino a questo elemento del corpo.

A questo punto, ecco come appare la struttura della nostra tabella.

Per aggiungere righe e dati alla nostra tabella, creeremo i tag delle righe della tabella (tr), dell’intestazione della tabella (th) e dei dati della tabella (td) utilizzando il metodo createElement(), quindi aggiungi i dati all’interno di quegli elementi con l’aiuto della proprietà innerHTML.

// Creating and adding data to first row of the table
let row_1 = document.createElement('tr');
let heading_1 = document.createElement('th');
heading_1.innerHTML = 'Sr. No.';
let heading_2 = document.createElement('th');
heading_2.innerHTML = 'Name';
let heading_3 = document.createElement('th');
heading_3.innerHTML = 'Company';

row_1.appendChild(heading_1);
row_1.appendChild(heading_2);
row_1.appendChild(heading_3);
thead.appendChild(row_1);


// Creating and adding data to second row of the table
let row_2 = document.createElement('tr');
let row_2_data_1 = document.createElement('td');
row_2_data_1.innerHTML = '1.';
let row_2_data_2 = document.createElement('td');
row_2_data_2.innerHTML = 'James Clerk';
let row_2_data_3 = document.createElement('td');
row_2_data_3.innerHTML = 'Netflix';

row_2.appendChild(row_2_data_1);
row_2.appendChild(row_2_data_2);
row_2.appendChild(row_2_data_3);
tbody.appendChild(row_2);


// Creating and adding data to third row of the table
let row_3 = document.createElement('tr');
let row_3_data_1 = document.createElement('td');
row_3_data_1.innerHTML = '2.';
let row_3_data_2 = document.createElement('td');
row_3_data_2.innerHTML = 'Adam White';
let row_3_data_3 = document.createElement('td');
row_3_data_3.innerHTML = 'Microsoft';

row_3.appendChild(row_3_data_1);
row_3.appendChild(row_3_data_2);
row_3.appendChild(row_3_data_3);
tbody.appendChild(row_3);

Dopo aver inserito i dati utilizzando la proprietà innerHTML, aggiungeremo quei dati alle rispettive righe. Ad esempio, in primo luogo, stiamo aggiungendo le intestazioni (cioè heading_1, heading_2, heading_3) a row_1. E poi stiamo aggiungendo la nostra prima riga, cioè row_1, al tag thead da bambino.

Allo stesso modo, stiamo creando altre 2 righe, ovvero row_2 e row_3 e quindi accodiamo (row_2_data_1, row_2_data_2, row_2_data_3) e (row_3_data_1, row_3_data_2, row_3_data_3) rispettivamente a queste 2 righe. E alla fine, aggiungiamo queste 2 righe al tag tbody poiché è per bambini.

Ecco come appaiono la tabella e la sua struttura HTML nella console dello sviluppatore.

A sinistra abbiamo la tabella ea destra abbiamo il codice generato dal browser. Puoi personalizzare il codice js in base a come vuoi che appaia la tabella. Abbiamo utilizzato solo 3 metodi JavaScript (createElement(), innerHTML, appendChild()) per raggiungere questo obiettivo.