Como adicionar linha à tabela HTML usando JavaScript

Às vezes, durante o desenvolvimento de um site, pode haver a necessidade de criar ou remover linhas e células ou adicionar dados em uma tabela dinamicamente usando JavaScript. JavaScript é uma linguagem dinâmica que ajuda a controlar dinamicamente, obter acesso e modificar componentes HTML no lado do cliente. Mais especificamente, pode ser utilizado para adicionar uma linha a uma tabela HTML.

Este manual usará JavaScript para explicar o procedimento para adicionar uma linha a uma tabela.

Como adicionar linha à tabela HTML usando JavaScript?

Para adicionar uma linha em uma tabela, use os seguintes procedimentos:

método insertRow()
Criar um novo elemento

Vamos verificar cada procedimento individualmente.

Método 1: Adicionar linha à tabela HTML usando o método insertRow()

O ' inserirLinha() ” é utilizado para adicionar uma nova linha no início da tabela. Ele cria um novo elemento e o insere na tabela. Ele recebe um índice como parâmetro que define a localização da tabela onde uma linha será adicionada. Se ' 0 ” ou nenhum índice será passado em um método, este método adiciona a linha no início da tabela.

Se você pretende adicionar a linha no final/final da tabela, passe o índice “ -1 ” como argumento.

Sintaxe

Use a seguinte sintaxe para adicionar linhas em uma tabela com a ajuda do método insertRow():

tabela. inserirLinha ( índice ) ;

Aqui, ' índice ” indica a posição em que você deseja adicionar uma nova linha, como no final da tabela ou no início.

Exemplo 1: Adicionando uma linha no início/início da tabela

Aqui, vamos criar uma tabela e um botão em um arquivo HTML usando o HTML e Tag. A tabela contém três linhas e três colunas ou células:

< ID da tabela = 'tabela' >

< tr >

< td > Célula de Linha 1 td >

< td > Célula de Linha 1 td >

< td > Célula de Linha 1 td >

tr >

< tr >

< td > Célula de Linha dois td >

< td > Célula de Linha dois td >

< td > Célula de Linha dois td >

tr >

< tr >

< td > Célula de Linha 3 td >

< td > Célula de Linha 3 td >

< td > Célula de Linha 3 td >

tr >

tabela >

< br >

Em seguida, crie um botão que chamará o “ adicionar linha() ” quando clicado:

< tipo de botão = 'botão' ao clicar = 'adicionar linha()' > Clique para adicionar linha na parte superior da Tabela botão >

Para estilizar a tabela, definiremos a borda de cada célula e a tabela conforme indicado abaixo:

mesa, td {

fronteira : 1px preto sólido ;

}

Agora, adicionaremos linhas na tabela na parte superior/início da tabela usando JavaScript. Para fazer isso, defina uma função chamada “ adicionar linha() ” que será chamado no evento onclick() do botão. Em seguida, busque a tabela criada usando o “ getElementById() ” método. Depois disso, chame o ' inserirLinha() ” método passando o “ 0 ” como parâmetro que indica que a linha será adicionada no início da tabela.

Em seguida, invoque o “ insertCell() ” passando índices que mostram quantas células serão adicionadas à linha. Por fim, adicione os dados de texto ou texto nas células usando “ innerHTML ' propriedade:

funçãoaddLinha ( ) {
var tableLinha = documento. getElementById ( 'tabela' ) ;
foi fila = linha da tabela. inserirLinha ( 0 ) ;
onde célula1 = fileira. insertCell ( 0 ) ;
onde célula2 = fileira. insertCell ( 1 ) ;
onde célula3 = fileira. insertCell ( dois ) ;
célula1. innerHTML = 'Célula da Nova Linha' ;
célula2. innerHTML = 'Célula da Nova Linha' ;
célula3. innerHTML = 'Célula da Nova Linha' ;
}

Como você pode ver na saída, a nova linha é adicionada no topo da tabela existente clicando no botão:

Exemplo 2: Adicionando uma linha no final da tabela

Se você quiser inserir uma linha no final/final da tabela, passe o “ -1 ” índice para “ inserirLinha() ” método. Ele adicionará a linha finalmente quando o botão for clicado:

funçãoaddLinha ( ) {
var tableLinha = documento. getElementById ( 'tabela' ) ;
foi fila = linha da tabela. inserirLinha ( - 1 ) ;
onde célula1 = fileira. insertCell ( 0 ) ;
onde célula2 = fileira. insertCell ( 1 ) ;
onde célula3 = fileira. insertCell ( dois ) ;
célula1. innerHTML = 'Célula da Nova Linha' ;
célula2. innerHTML = 'Célula da Nova Linha' ;
célula3. innerHTML = 'Célula da Nova Linha' ;
}

Resultado

Vamos para o outro método!

Método 2: Adicionar linha à tabela HTML criando um novo elemento

Existe outro método para adicionar uma linha em uma tabela que está criando novos elementos usando métodos JavaScript, incluindo o “ criarElemento() ” método e o “ appendChild() ” método. O createElement() cria os elementos e e o método appendChild() anexa as células e linhas em uma tabela.

Sintaxe

Siga a sintaxe fornecida para criar um novo elemento para adicionar uma linha em uma tabela usando JavaScript:

documento. createElement ( 'tr' ) ;

Aqui o ' tr ” é a linha da tabela.

Exemplo

Agora usaremos a mesma tabela criada anteriormente em HTML com um arquivo CSS, mas no arquivo JavaScript, usaremos o “ criarElemento() ” método. Em seguida, adicione os dados ou texto nas células usando o “ innerHTML ' propriedade. Por último, invoque o “ appendChild() ” que adicionará as células em uma linha e depois a linha em uma tabela:

funçãoaddLinha ( ) {
var tableLinha = documento. getElementById ( 'tabela' ) ;
foi fila = documento. createElement ( 'tr' ) ;
onde célula1 = documento. createElement ( 'td' ) ;
onde célula2 = documento. createElement ( 'td' ) ;
onde célula3 = documento. createElement ( 'td' ) ;
célula1. innerHTML = 'Célula da Nova Linha' ;
célula2. innerHTML = 'Célula da Nova Linha' ;
célula3. innerHTML = 'Célula da Nova Linha' ;
fileira. appendChild ( célula1 ) ;
fileira. appendChild ( célula2 ) ;
fileira. appendChild ( célula3 ) ;
linha da tabela. appendChild ( fileira ) ;
}

A saída mostra que a nova linha foi adicionada com sucesso no final da tabela:

Compilamos todos os métodos para adicionar uma linha em uma tabela usando JavaScript.

Conclusão

Para adicionar uma linha em uma tabela, use as duas abordagens: método insertRow() ou crie um novo elemento usando métodos predefinidos de JavaScript, incluindo o método appendChild() e o método createElement(). Você pode adicionar uma linha no início do final da tabela usando o método insertRow() passando índices. Este manual explicou os procedimentos para adicionar uma nova linha em uma tabela clicando em um botão usando JavaScript.

Como adicionar linha à tabela HTML usando JavaScript