Criar tabela usando JavaScript

1. Várias tags usadas para criar uma tabela em HTML
2. Criar uma tabela usando JavaScript

A linguagem de programação JavaScript nos permite criar e manipular elementos DOM (Document Object Model). Isso nos dá muito mais flexibilidade e torna muito mais fácil para todos trabalharem com o DOM, especialmente se você for um desenvolvedor de back-end.

Existem duas maneiras de adicionar elementos HTML, como tabelas, a um documento HTML: a primeira é adicionando a tag da tabela HTML diretamente em nossa página HTML e a segunda é criando a tabela inteira dentro de nosso código JavaScript. A segunda opção é a forma mais popular de criar e adicionar a tabela ao DOM.

Mas antes de nos aprofundarmos em como a tabela é criada com JavaScript, vamos primeiro entender visualmente as várias tags de tabela usadas para criar uma tabela e o que cada uma dessas tags significa exatamente. Isso lhe dará uma representação visual da tabela, tornando muito mais fácil para você entender a parte do código posteriormente neste artigo.

Várias tags usadas para criar uma tabela em HTML

Abaixo está a lista de tags que são usadas para criar uma tabela em HTML.

1. table: A tag HTML table representa toda a tabela em HTML. Esta é a tag inicial da tabela dentro da qual todas as outras tags relacionadas à tabela (como thead, tr, td, etc) serão usadas dependendo de como você deseja estruturar a tabela.
2. thead: O thead representa o cabeçalho da tabela. Esta tag é usada para adicionar títulos às tabelas. Geralmente representa a primeira linha da tabela. Para adicionar dados dentro da tag thead, usamos a tag th. Se não quiser adicionar um título às suas tabelas, você pode pular a tag thead.
3. tbody: O tbody representa o corpo da mesa. Esta tag representa todo o corpo ou conteúdo da tabela.
4. tfoot: O tfoot significa rodapé da mesa. Geralmente representa a última linha da tabela. Essa tag é opcional. Não usamos essa tag com frequência.
5. tr: O tr representa a linha da tabela. Isso representa toda a linha da tabela. Para inserir dados na tabela, seja no cabeçalho, corpo ou rodapé da tabela, primeiro temos que criar uma linha e, em seguida, dentro dessa linha, podemos inserir os dados com a ajuda da tag td.
6. th: O th é usado apenas dentro da tag thead. Ele representa a única célula da linha do título. Faz os títulos da tabela em negrito.
7. td: O td significa dados da tabela. Ele representa a única célula da tabela. É semelhante a th, mas a única diferença é que th é usado apenas dentro da tag thead e td é usado em outro lugar. A tag td pode ser usada com as tags tbody e tfoot.

Se você combinar todas essas tags de forma aninhada, ou seja, uma dentro da outra, é assim que a tabela ficará depois de criada.

A borda vermelha representa toda a mesa. Dentro dele, temos 3 tags, cabeçalho da tabela (thead), corpo da tabela (tbody) e rodapé da tabela (tfoot), que são representados com a borda verde. Para inserir dados dentro dessas três tags, primeiro temos que criar uma linha com a ajuda da tag tr. Esta linha é representada pela borda amarela. E então, para inserir dados no cabeçalho da tabela, usamos a tag th, e para inserir dados no corpo da tabela ou rodapé da tabela, usamos as tags td. Ele é mostrado com a ajuda da cor cinza.

Criar uma tabela usando JavaScript

Para criar um elemento HTML usando JavaScript, temos que usar um método chamado document.createElement() que leva o nome da tag, que é uma string como parâmetro. Por exemplo, queremos criar uma tabela, então vamos passar a string table como uma entrada para o método createElement() document.createElement('table').

Vamos agora criar a tabela abaixo inteiramente usando JavaScript.

A tabela acima possui 4 linhas. A primeira linha contém todos os títulos e as três linhas seguintes contêm os dados.

Abaixo, temos o código HTML, CSS e JS. Dentro de nossa tag body, inicialmente não temos nada. Criaremos nossa tabela dentro do JavaScript e, no final, anexaremos a tabela inteira à tag body para que fique visível na página da web. Dentro da tag style, demos um estilo básico à nossa mesa.

<!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>

Para criar uma tabela, primeiro criaremos a tag table. Então, vamos armazenar essa tag em uma variável table para que mais tarde possamos usá-la. Da mesma forma, também criaremos as tags thead e tbody e as armazenaremos dentro das variáveis. Em seguida, acrescentamos thead e tbody à 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);

Você deve anexar ou adicionar a tabela que criou em JavaScript à tag body. Primeiro, temos que obter a tag do corpo do HTML usando seu id e, em seguida, anexaremos a tabela usando algo chamado método appendChild(). Como já armazenamos nossa tabela dentro da variável table, teremos apenas que anexar a tabela que criamos como filha a este elemento do corpo.

Neste ponto, é assim que a estrutura de nossa tabela se parece.

Para adicionar linhas e dados à nossa tabela, criaremos as tags de linhas da tabela (tr), cabeçalho da tabela (th) e dados da tabela (td) usando o método createElement(), e então iremos adicione os dados dentro desses elementos com a ajuda da propriedade 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);

Depois de inserir os dados usando a propriedade innerHTML, vamos anexar esses dados às suas respectivas linhas. Por exemplo, primeiro, estamos adicionando os cabeçalhos (ou seja, heading_1, heading_2, heading_3) a row_1. E então estamos acrescentando nossa primeira linha, ou seja, row_1, à tag thead como um filho.

Da mesma forma, estamos criando outras 2 linhas, ou seja, row_2 e row_3 e, em seguida, acrescentando (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) variáveis ​​respectivamente a estes 2 filas. E no final, estamos acrescentando essas 2 linhas à tag tbody, pois é filha.

Agora, é assim que a tabela e sua estrutura HTML se parecem no console do desenvolvedor.

À esquerda, temos a tabela e, à direita, o código gerado pelo navegador. Você pode personalizar o código js com base na aparência da tabela. Para isso, usamos apenas 3 métodos JavaScript (createElement(), innerHTML, appendChild()).