Como criar uma tabela em javascript (duas maneiras de desenhar uma tabela em javascript)

Autor：Eve Cole Data da Última Atualização：2025-01-28 04:00:02

1. Funções insertRow() e insertCell()

A função insertRow() pode receber parâmetros, no seguinte formato:

insertRow(index): o índice começa em 0

Esta função adiciona uma nova linha antes da linha do índice, como insertRow(0), que adiciona uma nova linha antes da primeira linha. A função insertRow() padrão é equivalente a insertRow(-1), que adiciona uma nova linha ao final da tabela. Geralmente, quando o usamos: objTable.insertRow(objTable.rows.length) É para adicionar uma nova linha no final da tabela objTable.

O uso de insertCell() e insertRow é o mesmo e não será discutido aqui.

2. Métodos deleteRow() e deleteCell()

A função deleteRow() pode receber parâmetros, o formato é o seguinte: deleteRow(index): o índice começa em 0

O mesmo significado dos dois métodos acima é excluir as linhas e células na posição especificada. Parâmetros a serem passados: Índice é a posição da linha na tabela. Ele pode ser obtido pelo seguinte método e depois excluído:

Copie o código do código da seguinte forma:

var row=document.getElementById("ID da linha");

var index=row.rowIndex;//Existe esse atributo, hehe

objTable.deleteRow(índice);

Deixe-me contar sobre um problema que encontrei durante o uso Ao excluir linhas em uma tabela, se você excluir uma determinada linha, o número de linhas na tabela mudará imediatamente. seguinte código está errado:

Copie o código do código da seguinte forma:

função clearRow(){

objTable= document.getElementById("minhaTabela");

for( var i=1; i<objTable.rows.length ; i++ )

{

tblObj.deleteRow(i);

}

Este código deseja excluir o corpo da tabela original. Existem dois problemas. Em primeiro lugar, não pode ser deleteRow(i), deveria ser deleteRow(1). Porque ao excluir linhas da tabela, o número de linhas na tabela está mudando. Esta é a chave para o problema. rows.length está sempre diminuindo e o número de linhas excluídas é sempre menor que a metade do esperado. exclua a tabela corretamente. A linha de código deve ficar assim:

Copie o código do código da seguinte forma:

função clearRow(){

objTable= document.getElementById("minhaTabela");

var comprimento = objTable.rows.length;

for(var i=1; i<comprimento; i++)

{

objTable.deleteRow(i);

}

3. Defina dinamicamente as propriedades de células e linhas

A. Use o método setAttribute() com o seguinte formato: setAttribute(atributo, valor do atributo)

Nota: Este método pode ser usado para quase todos os objetos DOM. O primeiro parâmetro é o nome do atributo, por exemplo: border, e o segundo parâmetro é o valor que você deseja definir para border, por exemplo: 1.

Copie o código do código da seguinte forma:

var objMyTable = document.getElementById("minhaTabela");

objMyTable.setAttribute("border",1);//Define a borda como 1 para a tabela

Para outras coisas, por exemplo, se você deseja definir a altura de um TD, você também precisa primeiro obter o objeto TD e depois usar o método setAttribute().

Copie o código do código da seguinte forma:

var objCell = document.getElementById("myCell");

objCell.setAttribute("height",24);//Define a altura da célula como 24

Encontrei um problema ao definir estilos ao usá-lo. Você não pode usar setAttribute("class","inputbox2"); em vez disso, você deve usar setAttribute("className","inputbox2"). , alguns atributos são inconsistentes com o que temos em DW, haha, vamos explorar por nós mesmos.

B. Atribuição direta

Copie o código do código da seguinte forma:

var objMyTable = document.getElementById("minhaTabela");

objMyTable.border=1;//Define a borda da tabela como 1

Esse método também se aplica a todos, haha.

4. Crie uma mesa

Depois de entender a adição e exclusão de linhas <tr> e células <td>, você poderá criar uma tabela.

Passo 1: Você precisa ter uma tabela que deseja alterar dinamicamente. Estou falando aqui de uma tabela que já existe na página. Precisamos definir um id: myTable.

Copie o código do código da seguinte forma:

var objMyTable = document.getElementById("minhaTabela");

Etapa 2: criar objetos de linha e coluna

Copie o código do código da seguinte forma:

var índice = objMyTable.rows.length-1;

var nextRow = objMyTable.insertRow(index);//As linhas a serem adicionadas são adicionadas da penúltima linha.

//Número da caixa de celular

var newCellCartonNo = nextRow.insertCell();

var cartonNoName = "IptCartonNo";

newCellCartonNo.innerHTML = "<input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";

newCellCartonNo.setAttribute("className","tablerdd");

É isso, você pode simplesmente criar uma linha e uma coluna. Postei o código específico abaixo. É apenas um exemplo muito simples, mas o método é provavelmente o acima. Haha, vamos explorar lentamente ~.

Copie o código do código da seguinte forma:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<cabeça>

<title>Blu-ray-BlueShine</title>

var Contagem=falso,NO=1;

função addRow(){

Contar=!Contar;

//Adiciona uma linha

var novoTr = testTbl.insertRow(testTbl.rows.length);

//Adiciona duas colunas

var novoTd0 = newTr.insertCell();

var novoTd1 = newTr.insertCell();

var novoTd2 = newTr.insertCell();

//Definir conteúdo e atributos da coluna

if(Contagem){newTr.style.background="#FFE1FF";}

senão {newTr.style.background="#FFEFD5";}

newTd0.innerHTML = '<tipo de entrada=caixa de seleção id="box4">';

NÃO++

newTd1.innerText="Linha "+ NÃO+";

}

</script>

</head>

<corpo>

<table border=0 cellpacing="1" id="testTbl" style="font-size:14px;"

<td>Linha 1</td>

</tr>

</tabela>

<rótulo>

</label>

</body>

</html>

5. Método anexarChild()

Copie o código do código da seguinte forma:

<html>

<cabeça>

<title>Minha página de teste</title>

<!--

var númerotexto = 1;

function addTextBox(formulário, afterElement) {

//Incrementa o número da caixa de texto

textoNúmero++;

//Cria a etiqueta

var rótulo = document.createElement("rótulo");

//Cria a caixa de texto

var textField = document.createElement("entrada");

textField.setAttribute("tipo","texto");

textField.setAttribute("nome","txt"+textNumber);

textField.setAttribute("id","txt"+textNumber);

//Adiciona o texto do rótulo

label.appendChild(document.createTextNode("Caixa de Texto #"+textNumber+": "));

//Coloca a caixa de texto dentro

label.appendChild(textField);

//Adiciona tudo ao formulário

form.insertBefore (rótulo, afterElement);

retornar falso;

}

function removeTextBox(formulário) {

if (textNumber > 1) { // Se houver mais de uma caixa de texto

//Remove o último adicionado

form.removeChild(document.getElementById("txt"+textNumber).parentNode);

número de texto--;

}

//-->

</script>

<!--

rótulo {

exibição: bloco;

margem: 0,25em 0em;

}

-->

</estilo>

</head>

<corpo>

<label>Caixa de texto nº 1: <input type="text" name="txt1" id="txt1" /></label>

<p>

</p>

</form>

</body>

</html>

<html>

<cabeça>

<title>Minha página de teste</title>

<!--

var númerotexto = 1;

function addTextBox(formulário, afterElement) {

//Incrementa o número da caixa de texto

textoNúmero++;

//Cria a etiqueta

var rótulo = document.createElement("rótulo");

//Cria a caixa de texto

var textField = document.createElement("entrada");

textField.setAttribute("tipo","texto");

textField.setAttribute("nome","txt"+textNumber);

textField.setAttribute("id","txt"+textNumber);

//Adiciona o texto do rótulo

label.appendChild(document.createTextNode("Caixa de Texto #"+textNumber+": "));

//Coloca a caixa de texto dentro

label.appendChild(textField);

//Adiciona tudo ao formulário

form.insertBefore (rótulo, afterElement);

retornar falso;

}

function removeTextBox(formulário) {

if (textNumber > 1) { // Se houver mais de uma caixa de texto

//Remove o último adicionado

form.removeChild(document.getElementById("txt"+textNumber).parentNode);

número de texto--;

}

//-->

</script>

<!--

rótulo {

exibição: bloco;

margem: 0,25em 0em;

}

-->

</estilo>

</head>

<corpo>

<label>Caixa de texto nº 1: <input type="text" name="txt1" id="txt1" /></label>

<p>

</p>

</form>

</body>

</html>