Este é o código de um sistema de livraria, feito em HTML e JavaScript,
que permite ver como funciona e também manipular uma tabela através do DOM.
<html>
<head>
<script type="text/javascript">
var ultimocodigo=2;
function remover() {
//Recebe a posição a ser alterada
pos=codigo.value-1;
pos=parseInt(pos);
//remove filho de livro da posição pos
var oChild=livros.children(pos);
livros.removeChild(oChild);
if(pos+1==ultimocodigo)
ultimocodigo--;
}
function removerCol() {
//remove filhos de linha, um a um (na posição 0) a cada vez que a função é chamada
var oChild=linha.children(0);
linha.removeChild(oChild);
}
function removerALL() {
try
{
livros.removeNode(true);//remove todos nodes de livros
}
catch(x)
{
alert("Você já removeu todos elementos. A página será recarregada quando você apertar ok.");
document.location.reload();
}
}
function removerTable() {
try
{
oTable.removeNode(true);
}
catch(x)
{
alert("Você já removeu a tabela. A página será recarregada quando você apertar ok.");
document.location.reload();
}
}
function incluir() {
linha=document.createElement('tr');
_codigo=document.createElement('td');
ultimocodigo++;
textoCodigo=document.createTextNode(ultimocodigo);
_codigo.appendChild(textoCodigo);// inclui textoCodigo como filho de td
_titulo=document.createElement('td');
textoTitulo=document.createTextNode(document.getElementById("titulo").value); // Returna uma referencia para o primeiro objeto com o valor específico do atributo ID
_titulo.appendChild(textoTitulo);// inclui como filho de td
_autor=document.createElement('td');
textoautor=document.createTextNode(document.getElementById("autor").value); // Returna uma referencia para o primeiro objeto com o valor específico do atributo ID
_autor.appendChild(textoautor);// inclui como filho de td
_preço=document.createElement('td');
textopreço=document.createTextNode(document.getElementById("preço").value); // Returna uma referencia para o primeiro objeto com o valor específico do atributo ID
_preço.appendChild(textopreço);// inclui como filho de td
linha.appendChild(_codigo); // refere td a tr
linha.appendChild(_titulo); // refere td a tr
linha.appendChild(_autor);
linha.appendChild(_preço);
x = document.getElementById("livros"); // refere tr a tbody
x.appendChild(linha);
}
</script>
<style type="text/css">
table { border-left:solid black thin;
border-top:solid black thin;
}
th { border-right: solid black thin;
border-bottom: solid black thin;
background: #CCCCCC;
}
td { border-right:solid black thin;
border-bottom:solid black thin;
}
</style>
</head>
<body>
<h1>Livraria</h1>
<table id="oTable" border="0" cellspacing="0" cellpadding="5">
<caption>Livros Disponíveis</caption>
<thead>
<tr><th>Código</th><th>Título</th><th>Autor(es)</th><th>Preço</th></tr>
</thead>
<tbody id="livros">
<tr><td>1</td><td>Internet & WWW</td><td>Deitel, Deitel e Nieto</td><td>79.80</td></tr>
<tr><td>2</td><td>Harry Potter</td><td>J.K.Rowling</td><td>29.90</td></tr>
</tbody>
</table>
<p style="margin-top:30pt"><strong>Inserir livros:</strong><br/>
Título: <input type="text" id="titulo" value="Everyday Italian"/>
Autor(es): <input type="text" id="autor" value="Giada de Laurentis"/>
Preço: <input type="text" size="7" id="preço" value="14.90"/>
<input type="button" value="Incluir" onclick="incluir()"/></p>
<p style="margin-top:30pt"><strong>Remover livros:</strong><br/>
Número da linha: <input type="text" size="4" id="codigo"/>
<input type="button" value="Remover" onClick="remover()"/></p>
<p style="margin-top:30pt"><strong>Remover TODOS livros:</strong>
<input type="button" value="Remover" onClick="removerALL()"/></p>
<p style="margin-top:30pt"><strong>Remover livro coluna a coluna:</strong>
<input type="button" value="Remover" onClick="removerCol()"/></p>
<p style="margin-top:30pt"><strong>Remover toda a tabela:</strong>
<input type="button" value="Remover" onClick="removerTable()"/></p>
</body>
</html>
Para ver esse código em funcionamento acesse:
theway.789mb.com/aulas/livros.html
