Criar Tabela Usando Dom

[regina 0]

Bom dia pessoal!

 

Eu de novo precisando da ajuda de vocês.

 

Agora preciso criar tabelas através de um botão, estudei um pouco sobre DOM, mas ainda não conseguir entendê-lo :(

 

Vou descrever a tabela para vocês:

 

<table width="100%" border="0" cellspacing="0" id="experiencias">	<tr>	  <td width="1%" class="branco"> </td>	  <td width="49%">Ocupação/Cargo</td>	  <td>Empresa</td>	</tr>	<tr>	  <td> <input type="text" name="usu_ocupacao" id="usu_ocupacao" maxlength="50" size="50" tabindex="1" title="Ocupação/Cargo"/>	  </td>	  <td> <input type="text" name="usu_empresa" id="usu_empresa" maxlength="50" size="50" tabindex="2" title="Ocupação/Cargo"/>	  </td>	</tr>	<tr>	  <td width="49%">Entrada</td>	  <td>Saída</td>	</tr>	<tr>	  <td>		<input type="text" name="usu_entrada[]" id="usu_entrada1" maxlength="10" size="12" tabindex="8" title="Data da Admissão" onkeypress="return txtBoxFormat(this.form, this.id, '99/99/9999', event);" />	   </td>	  <td>		<input type="text" name="usu_saida[]" id="usu_saida1" maxlength="10" size="12" tabindex="8" title="Data da Admissão" onkeypress="return txtBoxFormat(this.form, this.id, '99/99/9999', event);" />	   </td>	</tr>	<tr>	  <td colspan="2">Descrição das funções exercidas</td>	</tr>	<tr>	  <td width="1%" class="branco"> </td>	  <td colspan="2">		<textarea name="usu_ocupacao_descricao" id="usu_ocupacao_descricao" tabindex="5" title="Descrição da Função"></textarea>	   </td>	</tr>  </table>	<input type="button" value="Adicionar Experiência" onclick="addTableEX();" >	<input type="button" value="Remover linhas" onclick="removeTableEX();" >

o script que fiz na tentativa de criar tabelas é este:

CRIAR TABELA EXPERIÊNCIAS PROFISSIONAIS*/function addRowToTableEX() {var table = document.createElement('table');//atributos		var tbody = document.createElement('tbody');//atributos	table.appendChild(tbody);		//cria linhas na tabela		var row = document.createElement('tr');	tbody.appendChild(row);var lastRow = table.rows.length; // if there's no header row in the table, then iteration = lastRow + 1 var iteration = lastRow; var row1 = table.insertRow(lastRow); // NÚMERO DA CÉLULA var cellLeft = row.insertCell(0); var textNode = document.createTextNode(iteration); cellLeft.setAttribute('align', 'center'); cellLeft.setAttribute('class', 'branco'); cellLeft.appendChild(textNode); // OCUPAÇÃO/CARGOvar cellRight1 = row.insertCell(1); var el = document.createElement('input'); cellRight1.setAttribute('align', 'left'); el.setAttribute('class', 'campo'); el.setAttribute('type', 'text'); el.setAttribute('name', 'usu_ocupacao[]'); el.setAttribute('id', 'usu_ocupacao' + iteration); el.setAttribute('maxlength', '50'); el.setAttribute('size', '50'); cellRight1.appendChild(el); // EMPRESAvar cellRight2 = row.insertCell(2); var e2 = document.createElement('input'); cellRight2.setAttribute('align', 'left'); e2.setAttribute('class', 'campo'); e2.setAttribute('type', 'text'); e2.setAttribute('name', 'usu_empresa[]'); e2.setAttribute('id', 'usu_empresa' + iteration); e2.setAttribute('maxlength', '50'); e2.setAttribute('size', '50'); cellRight2.appendChild(e2); // INSERE NOVA TR var row2 = table.insertRow(lastRow); // NÚMERO DA CÉLULA var cellLeft = row2.insertCell(0); cellLeft.setAttribute('align', 'center'); cellLeft.setAttribute('class', 'branco'); // CONTRATAÇAO var cellRight1 = row2.insertCell(1); var e1 = document.createElement('input'); cellRight1.setAttribute('align', 'left'); e1.setAttribute('class', 'campo'); e1.setAttribute('type', 'text'); e1.setAttribute('name', 'usu_entrada[]'); e1.setAttribute('id', 'usu_entrada' + iteration); e1.setAttribute('maxlength', '10'); e1.setAttribute('size', '12'); e1.setAttribute('onkeypress', 'return txtBoxFormat(this.form, this.id, \'99/99/9999\', event)');e1.onkeypress = function(evt) {	if (e1.value.length >= 10) {		return false;	} else {		try {			if (event) return txtBoxFormat(this.form, this.id, '99/99/9999', event);		} catch (e) {			return txtBoxFormat(this.form, this.id, '99/99/9999', evt);		}	}  }cellRight1.appendChild(e1); // DESLIGAMENTOvar cellRight2 = row2.insertCell(2);var e2 = document.createElement('input'); cellRight2.setAttribute('align', 'left'); e2.setAttribute('class', 'campo'); e2.setAttribute('type', 'text'); e2.setAttribute('name', 'usu_saida[]'); e2.setAttribute('id', 'usu_saida' + iteration); e2.setAttribute('maxlength', '10'); e2.setAttribute('size', '12'); e2.setAttribute('onkeypress', 'return txtBoxFormat(this.form, this.name, \'99/99/9999\', event)');cellRight2.appendChild(e2); // INSERE NOVA TR var row3 = table.insertRow(lastRow); // NÚMERO DA CÉLULA var cellLeft = row3.insertCell(0); cellLeft.setAttribute('align', 'center'); cellLeft.setAttribute('class', 'branco'); // FUNÇÕESvar cellRight1 = row3.insertCell(1);var e1 = document.createElement('textarea'); cellRight1.setAttribute('colspan', '2'); cellRight1.setAttribute('align', 'left'); e1.setAttribute('class', 'vagas'); e1.setAttribute('name', 'usu_ocupacao_descricao' + iteration); e1.setAttribute('id', 'usu_ocupacao_descricao' + iteration); cellRight1.appendChild(e1); } function removeRowFromTableEX() { var table = document.getElementById('experiencias'); var lastRow = table.rows.length; if (lastRow > 2) table.deleteRow(lastRow - 1); }

nesta função para remover nem mexi, quero criar a tabela primeiro.

 

Agradeço a quem puder me ajudar.

[Megadeth 2]

Olha regina a criação da sua tabela é muito relativa porque você já tem ela toda pre-definida,

nesse caso seria melhor apenas escreve-la dentro de uma div, usando innerHTML:

document.getElementById('id').innerHTML = "sua tabela aqui"

outra dica seria apenas fazer a tabela normalmente deixando com uma div

com display:none, e quando apertar o botão ela aparece:

document.getElementById('id').style.display = "block"

são só dicas, até você entender melhor o DOM.OK?

[regina 0]

Então vou descrever esta parte do sistema para você ver se esta sua sugestão é o melhor para mim, no momento:É um cadastro de currículos, onde o visitante irá cadastrar suas experiências profissionais. Como não é fixo o número de experiências, esta opção é a melhor para mim.Na verdade também não precisava ser tabela, poderiam ser os inputs com label.Na ocupação será implementado um combo com as opções do CBO para facilitar o filtro, futuramente.Só confirma para mim se está é a melhor opção ok?Obrigada pela atenção

[Megadeth 2]

A mehor opção para você seria textareas para colocar a experiência, ficaria mais ou menos assim:

<html><head><script type="text/JavaScript">i = 1;function nova_exp(){	var div = document.getElementById('novo');	var input = document.createElement('textarea');	input.setAttribute('type','text');	input.setAttribute('name','experiencia'+i);	div.appendChild(input);	i++}</script></head><body><form name="formulario" action="teste.php"><strong id="label">Experiências</strong><input type="button" name="nova" value="nova" onClick="nova_exp()"><div id="novo"></div></form></body></html>

esse codigo é apenas para servir como base.OK?

[regina 0]

Vou tentar como você sugeriu, espero que não seja muito complicado.Obrigada

[Megadeth 2]

Substitua os nomes input por texarea.

exclua a linha:

textarea.setAttribute('type','text');

se você num entender mando o codigo comentado pra você.OK?

[regina 0]

É com estas coisas que eu me revolto, sabia? rsEu sei o que alguns scripts fazem, mas não consigo montar um para a minha necessidade :(Obrigada Megadeth e uma Feliz Páscoa!!! :D