Nesta última parte do mini tutorial sobre DOM vamos ver algumas funções do DOM para acessar, criar e excluir linhas e células de uma tabela.
rows[]
Retorna um array de cada linha de uma tabela.
Sintaxe: tabela.rows[]
Exemplo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <head> <title>rows[]</title> <script type='text/javascript'> window.onload = fucntion() { alert(document.getElementById("tabela").rows[0].innerHTML); } </script> </head> <body> <table id="tabela" border="1"> <tr> <td>Célula 1</td> <td>Célula 2</td> </tr> <tr> <td>Célula 3</td> <td>Célula 4</td> </tr> </table> </body> </html> |
cells[]
Retorna um array de cada célula da tabela.
Sintaxe: Tabela.rows.cells[]
Exemplo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <head> <title>cells[]</title> <script type='text/javascript'> window.onload = fucntion() { alert(document.getElementById("tabela").rows[0].cells[0].innerHTML); } </script> </head> <body> <table id="tabela" border="1"> <tr> <td>Célula 1</td> <td>Célula 2</td> </tr> <tr> <td>Célula 3</td> <td>Célula 4</td> </tr> </table> </body> </html> |
insertRow()
Insere linhas em uma tabela.
Sintaxe: tabela.insertRow(índice);
Exemplo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <head> <title>insertRow</title> <script type='text/javascript'> window.onload = fucntion() { document.getElementById("tabela").insertRow(0); } </script> </head> <body> <table id="tabela" border="1"> <tr> <td>Célula 1</td> <td>Célula 2</td> </tr> <tr> <td>Célula 3</td> <td>Célula 4</td> </tr> </table> </body> </html> |
insertCell()
Insere células em uma tabela.
Sintaxe: linha.insertCell(índice)
Exemplo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html> <head> <title>insertCell</title> <script type='text/javascript'> window.onload = fucntion() { linha = document.getElementById("linha"); linha.insertCell(0); } </script> </head> <body> <table border="1"> <tr id="linha"> <td>Célula 1</td> <td>Célula 2</td> </tr> </table> </body> </html> |
deleteRow()
Apaga linhas de uma tabela.
Sintaxe: tabela.deleteRow(índice);
Exemplo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <head> <title>deleteRow</title> <script type='text/javascript'> window.onload = fucntion() { document.getElementById("tabela").deleteRow(0); } </script> </head> <body> <table id="tabela" border="1"> <tr> <td>Célula 1</td> <td>Célula 2</td> </tr> <tr> <td>Célula 3</td> <td>Célula 4</td> </tr> </table> </body> </html> |
deleteCell()
Apaga células de uma tabela.
Sintaxe: linha.deleteCell(índice)
Exemplo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html> <head> <title>deleteCell</title> <script type='text/javascript'> window.onload = fucntion() { linha = document.getElementById("linha"); linha.deleteCell(0); } </script> </head> <body> <table border="1"> <tr id="linha"> <td>Célula 1</td> <td>Célula 2</td> </tr> </table> </body> </html> |
Aqui termino meu mini-tutorial sobre DOM, espero que ele tenha sido útil pra o entendimento do assunto assim como o funcionamento de suas principais funções.
dezembro 13, 2007 às 3:43 pm
Aninha (desculpe-me a intimidade), li todas as 4 partes sobre DOM e ficou muito bem explicado… espero que continue com seus post… show de bola… está de parabéns