Como adicionar linha à tabela HTML usando JavaScript

Às vezes, durante o desenvolvimento de um site, pode haver um requisito para 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, ele 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 ()
• Crie um novo elemento

Vamos verificar cada procedimento individualmente.

Método 1: Adicione a tabela de linha à html usando o método insertrow ()

O "insertrow ()”O método é utilizado para adicionar uma nova linha no início da tabela. Cria um novo elemento e insere -o na tabela. É necessário um índice como um 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, esse método adiciona a linha no início da tabela.

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

Sintaxe

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

mesa.insertrow (í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 na parte superior/inicial da tabela

Aqui, criaremos 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:

Célula da linha 1	Célula da linha 1	Célula da linha 1
Célula da linha 2	Célula da linha 2	Célula da linha 2
Célula da linha 3	Célula da linha 3	Célula da linha 3

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

Clique para adicionar linha na parte superior da mesa

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

Tabela, TD
borda: 1px preto sólido;

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

Então, invocar o “InsertCell ()”Método passando índices que mostram quantas células serão adicionadas à linha. Por fim, adicione os dados de texto ou o texto nas células usando “Innerhtml" propriedade:

functionAddrow ()
var tablerow = documento.getElementById ("tabela");
Var Row = Tablerow.insertrow (0);
Var Cell1 = Linha.insertCell (0);
Var Cell2 = Linha.insertCell (1);
Var Cell3 = Linha.insertCell (2);
Cell1.inerhtml = "Cell of New Row";
Cell2.inerhtml = "Cell of New Row";
Cell3.inerhtml = "Cell of New Row";

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

Exemplo 2: Adicionando uma linha no final da tabela

Se você deseja inserir uma linha no último/final da tabela, passe o “-1Índice para o “insertrow ()”Método. Finalmente adicionará a linha quando o botão for clicado:

functionAddrow ()
var tablerow = documento.getElementById ("tabela");
Var Row = Tablerow.insertrow (-1);
Var Cell1 = Linha.insertCell (0);
Var Cell2 = Linha.insertCell (1);
Var Cell3 = Linha.insertCell (2);
Cell1.inerhtml = "Cell of New Row";
Cell2.inerhtml = "Cell of New Row";
Cell3.inerhtml = "Cell of New Row";

Saída

Vamos mudar para o outro método!

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

Há outro método para adicionar uma linha em uma tabela que está criando novos elementos usando métodos JavaScript, incluindo o “createElement ()”Método e o“ApndendChild ()”Método. O createElement () cria o e elementos e o método AppendChild () anexam 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 “Iremos usar o“createElement ()”Método. Em seguida, adicione os dados ou texto nas células usando o “Innerhtml" propriedade. Por fim, invoco o “ApndendChild ()”Método que adicionará as células em uma linha e depois a linha em uma tabela:

functionAddrow ()
var tablerow = documento.getElementById ("tabela");
Var Row = documento.createElement ("tr");
Var Cell1 = documento.createElement ("td");
Var Cell2 = documento.createElement ("td");
var celular3 = documento.createElement ("td");
Cell1.inerhtml = "Cell of New Row";
Cell2.inerhtml = "Cell of New Row";
Cell3.inerhtml = "Cell of New Row";
linha.ApndendChild (Cell1);
linha.ApndendChild (Cell2);
linha.ApndendChild (Cell3);
linha da tabela.ApndendChild (linha);

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

Nós compilamos todos os métodos para adicionar uma linha em uma tabela usando JavaScript.

Conclusão

Para adicionar uma linha em uma tabela, use o método das duas abordagens: insertrow () ou crie um novo elemento usando métodos predefinidos 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.