Hoje de manhã eu recebi um e-mail interessante para que eu fizesse um tutorial de como poderíamos criar, através do JavaScript, uma tabela que seria inserida num textarea (para cadastro de registros num banco de dados MySQL).
Não vou colocar nada de PHP/MySQL aqui, apenas o textarea para ver o seu funcionamento.
O script que eu fiz é esse:
<script language="JavaScript">
<!--
function criaTabela() {
var tr=window.prompt("Quantas linhas? <tr>","");
var td=window.prompt("Quantas células? <td>","");
var borda=window.prompt("Qual é a espessura da borda?","1");
if(isNaN(tr) || isNaN(td) || isNaN(borda) || tr == null || td == null || borda == null) {
window.alert("Ações inválidas.");
}
else {
var divisao=100 / td+"%";
document.getElementById("m").value+="<table border="+borda+" cellpadding=2 cellspacing=0 width=100%>\n";
for(i=0; i<tr; i++) {
document.getElementById("m").value+="<tr>\n";
for(j=0; j<td; j++) {
document.getElementById("m").value+="<td width="+divisao+">";
document.getElementById("m").value+="</td>\n";
}
document.getElementById("m").value+="</tr>\n\n";
}
document.getElementById("m").value+="</table>\n\n\n";
document.getElementById("m").focus();
document.getElementById("m").value+="Script criado por Fernando Martins de Toledo";
}
}
//-->
</script>
<textarea name="texto" id="m" rows=15 cols=70></textarea>
<br><br>
<input type="button" onclick="criaTabela();" value=" Criar Tabela ">
Ele também está em anexo.
Assim: clique no botão Criar Tabela. Lá, pedirá a quantidade de linhas da tabela (a tag é <tr>) e depois a quantidade de células (<td>), depois a espessura da tabela (<table border=).
Bem, agora, à explicação:
var tr=window.prompt("Quantas linhas? <tr>","");
var td=window.prompt("Quantas células? <td>","");
var borda=window.prompt("Qual é a espessura da borda?","1");
if(isNaN(tr) || isNaN(td) || isNaN(borda) || tr == null || td == null || borda == null) {
window.alert("Ações inválidas.");
}
Primeiro defini as variáveis tr, td, borda, que serão prompts, ou seja, aqueles que pedirão os valores.
Caso eles não sejam valores numéricos, que pode ser verificado com a função isNaN() e o tr, td ou borda estejam vazios (null), então retornará um alert com a mensagem de erro.
Agora:
else {
var divisao=100 / td+"%";
document.getElementById("m").value+="<table border="+borda+" cellpadding=2 cellspacing=0 width=100%>\n";
for(i=0; i<tr; i++) {
document.getElementById("m").value+="<tr>\n";
for(j=0; j<td; j++) {
document.getElementById("m").value+="<td width="+divisao+">";
document.getElementById("m").value+="</td>\n";
}
document.getElementById("m").value+="</tr>\n\n";
}
document.getElementById("m").value+="</table>\n\n\n";
document.getElementById("m").focus();
document.getElementById("m").value+="Script criado por Fernando Martins de Toledo";
}
Senão (else), criará uma variável (divisao), que dividirá 100 (porcentagem da tabela) pelo número de células e o +"%" será o que definirá as medidas como em porcentagem.
Depois, adicionaremos no final a tag <table>, com o valor da borda (definido na variável borda);
Agora, o clímax do script: como o script poderá criar a quantidade de linhas e células automaticamente a partir dos valores dados nos prompts?
Simples: dois loops FOR (poderia usar WHILE ou DO...WHILE, mas ficaria um pouco mais complexo), ou FOR intercalado.
No primeiro FOR, defini a variável i como 0, ou seja, o início de tudo e o i terá de ser menor do que a quantidade de itens dados (será igual se eu colocar i como 1 e colocar i<=tr).
Dentro do primeiro loop, executará a ação de criar as tags <tr>.
Mas sabemos que a tag <td> fica dentro da tag <tr>, logo, teríamos de aplicar isso ao JavaScript.
Para isso, executamos um segundo loop FOR dentro do primeiro loop.
A variável é k e tem a mesma estrutura do primeiro loop, que verificará quantas células o script deverá imprimir.
Certo. Fechamos o segundo loop, que irá mostrar as tags <td> (e seus atributos) e </td>.
No segundo, basta apenas fechar (</tr>);
Fechamos os loops.
Agora, basta apenas que coloquemos a tag final da tag <table>, ou seja, </table>, que será inserido no final de todas as ações.
Depois só coloquei uma mensagem daquele que criou o script (eu
).E depois, dará foco ao textarea.
Mas... como definir o textarea? Simples: nós fazemos a conexão com ele a partir de seu id (coloquei como m).
Só criar o textarea e o botão e voilà!
Ok?
Obrigado.
Quaisquer dúvidas serão bem recebidas.
Attached Files
-
tabela.html 1.09KB
68 downloads
