Curso de Programação em Javascript e HTML
204 pág.

Curso de Programação em Javascript e HTML


DisciplinaProgramação I20.578 materiais240.129 seguidores
Pré-visualização40 páginas
célula</td>
 </tr>
 </tbody>
 </table>
 <form>
 <input onclick=&quot;setRules()&quot; type=&quot;button&quot;
 value=&quot;Mostrar Contornos de Fronteira só nas Linhas&quot;>
 </form>
</body>
</html>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 182
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
Criar uma legenda para a tabela
<html>
<head>
 function caption()
 {
 var o=document.getElementById(&quot;myTable&quot;)
 var x=o.createCaption()
 x.innerText=&quot;A Minha Belíssima Tabela&quot;
 }
<title></title>
</head>
<body>
 <table id=&quot;myTable&quot; border=&quot;1&quot;>
 <tbody>
 <tr>
 <td>Linha1 célula1</td>
 <td>Linha1 célula2</td>
 </tr>
 <tr>
 <td>Linha2 célula1</td>
 <td>Linha2 célula2</td>
 </tr>
 <tr>
 <td>Linha3 célula1</td>
 <td>Linha3 célula2</td>
 </tr>
 </tbody>
 </table>
 <form>
 <input onclick=&quot;caption()&quot; type=&quot;button&quot;
 value=&quot;Criar uma Legenda para a Tabela&quot;>
 </form>
 <p>O Mozilla não consegue realizar este exercício corretamente.</p>
</body>
</html>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 183
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
Apagar (remover) uma linha
<html>
<head>
 function deleteMe(rowIndex)
 {
 document.getElementById(&quot;myTable&quot;).deleteRow(rowIndex)
 }
<title></title>
</head>
<body>
 <table id=&quot;myTable&quot; border=&quot;1&quot;>
 <tbody>
 <tr>
 <td>Linha 1</td>
 <td>
 <input onclick=&quot;deleteMe(this.parentNode.parentNode.rowIndex)&quot;
 type=&quot;button&quot; value=&quot;Apague-me&quot;>
 </td>
 </tr>
 <tr>
 <td>Linha 2</td>
 <td>
 <input onclick=&quot;deleteMe(this.parentNode.parentNode.rowIndex)&quot;
 type=&quot;button&quot; value=&quot;Apague-me&quot;>
 </td>
 </tr>
 <tr>
 <td>Linha 3</td>
 <td>
 <input onclick=&quot;deleteMe(this.parentNode.parentNode.rowIndex)&quot;
 type=&quot;button&quot; value=&quot;Apague-me&quot;>
 </td>
 </tr>
 <tr>
 <td>Linha 4</td>
 <td>
 <input onclick=&quot;deleteMe(this.parentNode.parentNode.rowIndex)&quot;
 type=&quot;button&quot; value=&quot;Apague-me&quot;>
 </td>
 </tr>
 <tr>
 <td>Linha 5</td>
 <td>
 <input onclick=&quot;deleteMe(this.parentNode.parentNode.rowIndex)&quot;
 type=&quot;button&quot; value=&quot;Apague-me&quot;>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 184
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
 </td>
 </tr>
 </tbody>
 </table>
</body>
</html>
Inserir uma linha
<html>
<head>
 function insRow()
 {
 var o=document.getElementById(&quot;myTable&quot;)
 var x=o.insertRow(2)
 var y=x.insertCell(0)
 var z=x.insertCell(1)
 y.innerHTML=&quot;Nova Célula1&quot;
 z.innerHTML=&quot;Nova Célula2&quot;
 }
<title></title>
</head>
<body>
 <table id=&quot;myTable&quot; border=&quot;1&quot;>
 <tbody>
 <tr>
 <td>Linha1 célula1</td>
 <td>Linha1 célula2</td>
 </tr>
 <tr>
 <td>Linha2 célula1</td>
 <td>Linha2 célula2</td>
 </tr>
 </tbody>
 </table>
 <form>
 <input onclick=&quot;insRow()&quot; type=&quot;button&quot; value=&quot;Inserir Linha&quot;>
 </form>
</body>
</html>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 185
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
11.14 Objeto tablecell
Este objeto representa elementos criados com as etiqueta <td> ou <th> do 
HTML. A coleção cells, pertencente ao objeto tablerow, contém uma lista com todos os 
objetos deste tipo existentes na linha de tabela que é representada pelo objeto 
tablerow. 
Propriedades
Propriedade Descrição
abbr Lê ou define uma abreviação para os cabeçalhos das células
align Define o alinhamento horizontal dos conteúdos das células
axis Lê ou define o nome de um grupo de cabeçalhos
cellIndex Lê o número de ordem (índice) de uma célula na linha a que 
pertence
colSpan Lê ou define o valor do colspan aplicado a uma célula
rowSpan Lê ou define o valor do rowspan aplicado a uma célula
vAlign Define o alinhamento vertical dos conteúdos das células
Cada uma das propriedades descritas mais acima corresponde a um atributo 
do elemento <td> em acordo com a linguagem HTML. 
Coleções
Coleção Descrição
headers Contém uma lista com os atributos id das células que têm 
cabeçalhos
Exemplos de Aplicação
Alterar o valor do atributo colspan
<html>
<head>
 function setColSpan()
 {
 var x=document.getElementById(&quot;myTable&quot;).rows[0].cells
 x[0].colSpan=&quot;2&quot;
 x[1].colSpan=&quot;6&quot;
 }
<title></title>
</head>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 186
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
<body>
 <table id=&quot;myTable&quot; border=&quot;1&quot;>
 <tbody>
 <tr>
 <td colspan=&quot;4&quot;>A cell</td>
 <td colspan=&quot;4&quot;>A cell</td>
 </tr>
 <tr>
 <td>célula</td>
 <td>célula</td>
 <td>célula</td>
 <td>célula</td>
 <td>célula</td>
 <td>célula</td>
 <td>célula</td>
 <td>célula</td>
 </tr>
 </tbody>
 </table>
 <form>
 <input onclick=&quot;setColSpan()&quot; type=&quot;button&quot;
 value=&quot;Alterar o valor de Colspan&quot;>
 </form>
</body>
</html>
Alinhar o conteúdo da célula
<html>
<head>
 function alignCell()
 {
 var x=document.getElementById(&quot;myTable&quot;).rows[0].cells
 x[0].align=&quot;center&quot;
 }
<title></title>
</head>
<body>
 <table id=&quot;myTable&quot; width=&quot;100%&quot; border=&quot;1&quot;>
 <tbody>
 <tr>
 <td>Linha1 célula1</td>
 <td>Linha1 célula2</td>
 </tr>
 <tr>
 <td>Linha2 célula1</td>
 <td>Linha2 célula2</td>
 </tr>
 </tbody>
 </table>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 187
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
 <form>
 <input onclick=&quot;alignCell()&quot; type=&quot;button&quot;
 value=&quot;Realinhar o conteúdo da primeira célula&quot;>
 </form>
</body>
</html>
Alinhar verticalmente o conteúdo da célula
<html>
<head>
 function alignCell()
 {
 var x=document.getElementById(&quot;myTable&quot;).rows[0].cells
 x[0].vAlign=&quot;bottom&quot;
 }
<title></title>
</head>
<body>
 <table id=&quot;myTable&quot; width=&quot;100%&quot; border=&quot;1&quot;>
 <tbody>
 <tr height=&quot;50&quot; valign=&quot;top&quot;>
 <td>Linha1 célula1</td>
 <td>Linha1 célula2</td>
 </tr>
 <tr height=&quot;50&quot; valign=&quot;top&quot;>
 <td>Linha2 célula1</td>
 <td>Linha2 célula2</td>
 </tr>
 </tbody>
 </table>
 <form>
 <input onclick=&quot;alignCell()&quot; type=&quot;button&quot;
 value=&quot;Realinhar o conteúdo da primeira célula&quot;>
 </form>
</body>
</html>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 188
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
11.15 Objeto tablerow
Este objeto representa de forma completa os elementos criados com a etiqueta 
<tr> do HTML. A coleção rows, pertencente ao objeto table, contém uma lista com 
todos os objetos deste tipo existentes na tabela que é representada por um objeto 
table. 
Propriedades
Propriedade Descrição
align Define o alinhamento horizontal do conteúdo
Carregar mais