Tutorial básico de DOM: Usando a tabela de controle DOM

Autor：Eve Cole Data da Última Atualização：2025-05-05 23:48:01

Não vou falar sobre o controle CSS da tabela por enquanto. Primeiro, compartilharei os DOMs comumente usados na tabela abaixo.

Os métodos comumente usados para adicionar operações de tabela são métodos InserTrow () e InsertCell ().

A linha é calculada a partir de zero, por exemplo:

Copie o código da seguinte

Significa adicionar uma nova linha à segunda linha.

A cópia do código é a seguinte:

var Atext = new Array ();

ATEXT [0] = document.createTextNode ("FreshEggs");

ATEXT [1] = document.createTextNode ("W610");

ATEXT [2] = document.createTextNode ("5 de novembro");

ATEXT [3] = document.createTextNode ("escorpião");

ATEXT [4] = document.createTextNode ("1038818");

for (var i = 0; i <ATEXT.Length; i ++) {

var otd = otr.insertCell (i);

otd.appendChild (atext [i]);

}

A variável OTR insere uma nova linha para a tabela e usa o InsertCell para inserir novos dados para esta linha, usa o CreateTextNode para criar um novo nó de texto e fornece ao OTD no AppendChild e o OTD é a nova célula.

1. Insira uma linha (tabela de adição dinâmica)

A cópia do código é a seguinte:

window.onload = function () {

var otr = document.getElementById ("membro"). Insertrow (2); // Insira uma linha

var Atext = new Array ();

ATEXT [0] = document.createTextNode ("FreshEggs");

ATEXT [1] = document.createTextNode ("W610");

ATEXT [2] = document.createTextNode ("5 de novembro");

ATEXT [3] = document.createTextNode ("escorpião");

ATEXT [4] = document.createTextNode ("1038818");

for (var i = 0; i <ATEXT.Length; i ++) {

var otd = otr.insertCell (i);

otd.appendChild (atext [i]);

}

</script>

Lista de membros <Ception> </gendion>

<tr>

<th scope = "col"> classe </th>

<th scope = "col"> aniversário </th>

<th scope = "col"> constelação </th>

<th scope = "col"> celular </th>

</tr>

<tr>

<Td> Isaac </td>

<Td> 24 de junho </td>

<td> câncer </td>

</tr>

<tr>

<td> Girlwing </td>

<Td> 16 de setembro </td>

<Td> Virgo </td>

</tr>

<tr>

<Td> TASTESTORY </td>

<Td> 29 de novembro </td>

<Td> Sagitário </td>

</tr>

</tabela>

2. Modifique o conteúdo da tabela

Depois que a tabela é criada, você pode usar diretamente o HTMLDOM para operar a tabela, que é mais conveniente que o documento.getElementById () e Document.getElementsByTagName ().

OTABLE.ROWS [I] .CELL [J]

O exposto acima pode acessar facilmente a i-ésima e a coluna J-és. Depois de obter o objeto de células, você pode usar o atributo InnerHTML para modificar o conteúdo de Xiangyu.

Por exemplo, modifique o conteúdo de 4 linhas e 5 colunas para ser bom

Então você pode usar o seguinte código

A cópia do código é a seguinte:

var otable = document.getElementById ("Tabela1");

Otable.Rows [4] .Cells [5] .innerhtml = "bom";

3. Exclua o conteúdo da tabela

Como a tabela tem a função de adicionar, modificar e excluí -la.

A exclusão de linhas na tabela usa o método Deleterow (i), onde eu é o número da linha.

A exclusão de colunas na tabela usa o método DeleteCell (j) de Tr.

O código a seguir indica a segunda linha da tabela excluída e a segunda coluna da terceira linha da tabela original

A cópia do código é a seguinte: var otable = document.getElementById ("Tabela1"); OTABLE.DELETEROW [2]; OTABLE.ROWS [2] .DELETECELL [3];

O código a seguir indica que, se a segunda linha da tabela for excluída e a segunda coluna da terceira linha da tabela original for considerada como tendo exclusão dinâmica e não afeta a estrutura geral HTML, ou se o conteúdo da tabela for um lote, a deleção dinâmica e a adição poderá ser adotada.

A cópia do código é a seguinte:

window.onload = function () {

var otr = document.getElementById ("membro"). Insertrow (2); // Insira uma linha

var Atext = new Array ();

ATEXT [0] = document.createTextNode ("FreshEggs");

ATEXT [1] = document.createTextNode ("W610");

ATEXT [2] = document.createTextNode ("5 de novembro");

ATEXT [3] = document.createTextNode ("escorpião");

ATEXT [4] = document.createTextNode ("1038818");

for (var i = 0; i <ATEXT.Length; i ++) {

var otd = otr.insertCell (i);

otd.appendChild (atext [i]);

}

</script>

Lista de membros <Ception> </gendion>

<tr>

<th scope = "col"> classe </th>

<th scope = "col"> aniversário </th>

<th scope = "col"> constelação </th>

<th scope = "col"> celular </th>

</tr>

<tr>

<Td> Isaac </td>

<Td> 24 de junho </td>

<td> câncer </td>

</tr>

<tr>

<td> Girlwing </td>

<Td> 16 de setembro </td>

<Td> Virgo </td>

</tr>

<tr>

<Td> TASTESTORY </td>

<Td> 29 de novembro </td>

<Td> Sagitário </td>

</tr>

</tabela>

Excluir colunas

A cópia do código é a seguinte:

função deletecolumn (Otable, inum) {

// Personalize a função de exclusão de coluna, ou seja, exclua a célula correspondente para cada linha

for (var i = 0; i <otable.rows.length; i ++)

OTABLE.ROWS [i] .DELETECELL (Inum);

}

window.onload = function () {

var otable = document.getElementById ("Tabela1");

deletecolumn (Otable, 2);

}

Para excluir colunas de tabela, não existe um método diretamente chamável no DOM. Você precisa escrever o método deleteColumn (). Este método aceita dois parâmetros, um parâmetro é o objeto da tabela e o outro parâmetro é o número da coluna que você deseja excluir. O método de escrita é muito simples. Usando o método DeLeteCell (), cada linha executa o método correspondente de exclusão de células.