Comparar revisões

Adentrando uma tabela HTML com JavaScript e interfaces DOM

Alterar Revisões

Revisão 327293:

Revisão 327293 por openjck em

Revisão 327319:

Revisão 327319 por TelaSocial em

Título:
Adentrando uma tabela HTML com JavaScript e interfaces DOM
Adentrando uma tabela HTML com JavaScript e interfaces DOM
Slug:
Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
Conteúdo:

Revisão 327293
Revisão 327319
n68      Note the order in which we created the elements and the texn68      Observe a ordem de criação dos elementos: 
>t node: 
n71      <li>First we created the &lt;table&gt; element.n71      <li>Primeiro o elemento &lt;table&gt; é criado.&nbsp;
n73      <li>Next, we created the &lt;tbody&gt; element, which is a n73      <li>Depois o elemento &lt;tbody&gt;.&nbsp;
>child of the &lt;table&gt; element. 
n75      <li>Next, we used a loop to create the &lt;tr&gt; elements,n75      <li>Depois um <em>loop</em> foi criado para fazer as linhas
> which are children of the &lt;tbody&gt; element.> por meio de elementos &lt;tr&gt;. Eles foram inseridos dentro do
 > elemento &lt;tbody&gt;.
n77      <li>For each &lt;tr&gt; element, we used a loop to create tn77      <li>Para cada elemento &lt;tr&gt;, um outro <em>loop&nbsp;<
>he &lt;td&gt; elements, which are children of &lt;tr&gt; elements>/em>foi criado para os elementos &lt;td&gt; que são as células da
>.> tabela.&nbsp;
n79      <li>For each &lt;td&gt; element, we then created the text nn79      <li>Para cada elemento &lt;td&gt; um nó de texto foi criado
>ode with the table cell's text.> — este é de fato a célula visível com o texto.&nbsp;
n83      Once we have created the &lt;table&gt;, &lt;tbody&gt;, &lt;n83      Na media que os elementos são criados, eles são inseridos d
>tr&gt;, and &lt;td&gt; elements and then the text node, we then a>entro de outros elementos criando-se uma estrutura com hierarquia
>ppend each object to its parent in the opposite order:>. A inserção é feita a partir das "folhas" depois subindo na hier
 >arquia, até &nbsp;o final onde a tabela será inserida no HTML. As
 >sim quando a tabela for inserida ela deverá aparecer completa.&nb
 >sp;
n86      <li>First, we attach each text node to its parent &lt;td&gtn86      <li>Primeiro o nó de texto é inserido no elemento &lt;td&gt
>; element using>; por meio de
n91      <li>Next, we attach each &lt;td&gt; element to its parent &n91      <li>Depois nós colocamos o &lt;td&gt; chamados no código de
>lt;tr&gt; element using> "cell" dentro dos &lt;tr&gt;
n96      <li>Next, we attach each &lt;tr&gt; element to the parent &n96      <li>Depois os &lt;tr&gt; são colocados dentro do &lt;tbody&
>lt;tbody&gt; element using>gt; também com o uso da interface appendChild
n101      <li>Next, we attach the &lt;tbody&gt; element to its parentn101      <li>o &lt;tbody&gt; na table
> &lt;table&gt; element using 
n106      <li>Next, we attach the &lt;table&gt; element to its parentn106      <li>E finalmente a tabela é colocada dentro do corpo do HTM
> &lt;body&gt; element using>L no elemento &lt;body&gt;
n113      Remember this technique. You will use it frequently in progn113      Esta técnica é uma das mais básicas para a inserção de elem
>ramming for the W3C DOM. First, you create elements from the top >entos no HTML e as interfaces também podem ser utilizadas para in
>down; then you attach the children to the parents from the bottom>serção de elementos em outros tipos de documentos baseados em XML
> up.> que tem suporte para W3C DOM Level 1.&nbsp;
114    </p>
115    <p>114    </p>
116      Here's the HTML markup generated by the JavaScript code:115    <p>
116      Abaixo é o código gerado pelo exemplo acima:&nbsp;
n127      Here's the DOM object tree generated by the code for the TAn127      E abaixo a representação em árvore:
>BLE element and its child elements: 
t133      You can build this table and its internal child elements byt133      O exemplo permite criar uma tabela com dois métodos DOM. No
> using just a few DOM methods. Remember to keep in mind the tree > entanto, é importante ter em mente sempre o modelo de árvore. Yo
>model for the structures you are planning to create; this will ma>u can build this table and its internal child elements by using j
>ke it easier to write the necessary code. In the &lt;table&gt; tr>ust a few DOM methods. Na forma narrativa a estrutura acima inici
>ee of Figure 1 the element &lt;table&gt; has one child, the eleme>a com uma tabela (&lt;table&gt;) que tem somente um nó filho, o &
>nt &lt;tbody&gt;. &lt;tbody&gt; has two children. Each &lt;tbody&>lt;tbody&gt; que por sua vez possui dois nós filhos, &lt;tr&gt;, 
>gt;'s child (&lt;tr&gt;) has two children (&lt;td&gt;). Finally, >e cada &lt;tr&gt; tem dois &lt;td&gt; que por sua vez possuem um 
>each &lt;td&gt; has one child, a text node.>elemento do tipo nó de texto.&nbsp;

Voltar ao histórico