DOM Parte 4 – Manipulando tabelas

Posted by Ana Claudia on ago 19, 2007 in HTML, Javascript, dhtml, dom |
Subscribe

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.

Tags:, , ,

3 Comments

Breno
dez 13, 2007 at 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


 
Rudy
out 5, 2010 at 10:41 pm

Ana você conhece alguma jeito de alterar o valor da celula de uma tabela?


 
Carlos Eduardo
mai 20, 2011 at 7:33 pm

Como é que eu faço com que a tabela fique com o estilo zebrado?


 

Reply

Copyright © 2012 Ana Claudia. All Rights Reserved.
Theme by Lorelei Web Design.