Ruan Carlos Desenvolvimento

Olá damos início a uma série de tutoriais e dicas sobre como programar em php e construir páginas com (X)HTML, (D)HTML e HTML.

Como funciona a internet

Simples assim (forma bruta):

1. O usuário através de um Browser (Internet explorer, Mozilla Firefox, Opera, etc) faz uma requisição a um servidor
2. O servidor processa esta requisição
3. O Browser recebe a resposta do servidor
4. Usuário vê a resposta através do Browser

Os elementos

• HTML - Hipertext Markup Language Linguagem de marcação de texto, usada para criar páginas de internet
• HTTP - Hipertext Transfer Protocol É o protocolo de transferência de arquivos de Hiper Texto
  • FTP - File Transfer Protocol É o protocolo de transferência de arquivo, vamos usar ele quando formos jogar nossas páginas na web
• BROWSER - ou navegador web. É o programa que interpreta o HTML

HTML - Linguagem de Marcação de Hipertexto

Esta linguagem foi criada a muito tempo atrás e ela é:

• Baseada em TAGS
• Desenvolvida por Tim Berners-Lee
• É um arquivo de texto com a extensão .HTML ou .HTM
• Tem seu desenvolvimento simples, basta o bloco de notas para fazer uma página
• O problema é que não existe apenas um Browser assim cada empresa criou seus elementos aonde dificulta a criação de documentos compatíveis com vários Browsers

XML - (eXtensible Markup Language)

Serve para descrever o conteúdo de um arquivo e não como deve ser exibido. Permite também a criação de marcação padronizada fazendo a separação entre marcação e exibição.

Terminamos por aqui.
Veja a lista de links para continuar a nossa série.

Links para os próximos passos:

Opá é nóis nós di de novo.

Esta é uma página permanente para a descrição do método insertCell do DOM.

Para que serve?

Este método é usado para inserir uma célula em uma linha especificada de uma tabela (tr).

Ele também adiciona a nova célula na coleção de célula (cels collection)

Sintaxe

var oCel = TR.insertCell(index);

• TR é a referencia do Table Row(linha) aonde a célula vai ser inserida
• index é o índice aonde a nova célula vai ser inserida (o padrão é -1 que será a ultima célula da linha)
• oCel é a referencia da nova célula criada

Exemplo

<table>
  <tr id="linha0">
    <td>Célula Original</td>

  </tr>
</table>
 
<script type="text/javascript">
 
  function adicionaCelula(tableRowID)
  {
 
    // Pega a referência da linha
    var oLinha= document.getElementById(tableRowID);
 
    //insere a celula na linha na posição 0
    var novaCelula = oLinha.insertCell(0);

 
    // Adiciona um texto à célula
    var novoTexto  = document.createTextNode('Nova célula')
    novaCelula.appendChild(novoTexto);
  }
 
// Chama a função adicionaCelula passando como parametro o id da linha
adicionaCelula('linha0');
 
</script>

Aprenda a usar o método inserRow()
Veja um outro exemplo mais completo aqui

Referências:

MSDN
Mozila

Olá, estamos aqui mais uma vez.

Esta é uma página permanente para a descrição do método insertrow do DOM.

Para que serve?

Este método é usado para inserir uma nova linha em uma tabela (tr).
Ele também adiciona a nova linha na coleção de linhas (rows collection)

Sintaxe

var oRow = HTMLTableElement.insertRow(index);

• HTMLTableElement é a referencia do elemento tabela do seu HTML
• index é o índice aonde a nova linha vai ser inserida (o padrão é -1 que será a ultima linha)
• oRow é a referencia a nova linha criada

Exemplo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<table id="minhaTabela">
  <tr>
    <td>Linha fixa</td>
  </tr>
</table>
 
<script type="text/javascript">
 
  function adicionarLinhaEmTabela(idDaTabela)
  {
 
    // Pega a referencia da tabela
    var oTable = document.getElementById(idDaTabela);
 
    // Insere a nova linha [(-1) para ser a última linha]
    var oNovaLinha_Tr   = oTable.insertRow(-1);
 
    // Insere uma celula na nova linha [(0) é o índice]
    // Em breve um novo tutorial sobre o insertCell
    var oNovaCelula_Td  = oNovaLinha_Tr.insertCell(0);
 
    // Adicionamos um texto para a nova célula
    var NovoTexto  = document.createTextNode('Nova Linha')
    oNovaCelula_Td.appendChild(NovoTexto);
  }
 
// Chamada da função adicionarLinhaEmTabela() com o id da tabela
adicionarLinhaEmTabela('minhaTabela');
 
</script>

Veja um outro exemplo mais completo aqui

Referências:
W3C
MSDN
Mozila
w3schools

Olá, damos início ao nosso blog, para saber mais sobre o nosso blog leia o sobre nós.

Obrigado

Então vamos ao que nos interessa!!!

Assunto: Adicionar linhas dinamicamente em uma tabela;
Ferramentas: Editor html;

Tudo começa com o html.

1
2
3
4
5
6
7

<html>
    <head>
        <title>Criando linhas dinamicamente em tabelas</title>
    </head>
    <body>
    </body>
</html>

Leia o resto da entrada »

Olá sejam todos bem vindo ao nosso blog.

Espero que todos gostem das dicas e tutoriais que serão postados aqui!

Atenciosamente à equipe Ruan Carlos de desenvolvimento!