Ir para conteúdo
Fórum Script Brasil
  • 0

Criar Tabela Usando Dom

Guest regina

Perguntado por Guest regina,

 Share

Pergunta

Guest regina

Guest regina

Postado
Postado

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>1</td>
      <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="1%" class="branco"> </td>
      <td width="49%">Entrada</td>
      <td>Saída</td>
    </tr>
    <tr>
      <td width="1%" class="branco"> </td>
      <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 width="1%" class="branco"> </td>
      <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 usuário pode cadastrar n experiências profissionais que teve, então eu gostaria de incluir para ele criar a tabela e os demais elementos. Alguém pode me ajudar com esta tarefa? Criar inputs em uma linha eu consegui através de um script da net, mas mais de uma linha e as demais definições que necessito não :( tentei adaptar o script a seguir mas não obtive sucesso: 
function addRowToTableEX() 
{ 
var tbl = document.getElementById('experiencias'); 
var lastRow = tbl.rows.length; 
// if there's no header row in the table, then iteration = lastRow + 1 
var iteration = lastRow; 
var row = tbl.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/CARGO
var 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); 

// EMPRESA
var 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 row = tbl.insertRow(lastRow); 

// NÚMERO DA CÉLULA 
var cellLeft = row.insertCell(0); 
cellLeft.setAttribute('align', 'center'); 
cellLeft.setAttribute('class', 'branco'); 

// CONTRATAÇAO 
var cellRight1 = row.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); 

// DESLIGAMENTO
var 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_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)');
cellRight4.appendChild(e4); 

// INSERE NOVA TR 
var row = tbl.insertRow(lastRow); 

// NÚMERO DA CÉLULA 
var cellLeft = row.insertCell(0); 
cellLeft.setAttribute('align', 'center'); 
cellLeft.setAttribute('class', 'branco'); 

// FUNÇÕES
var cellRight5 = row.insertCell(5);
var e5 = document.createElement('textarea'); 
cellRight5.setAttribute('align', 'left'); 
e5.setAttribute('class', 'vagas'); 
e5.setAttribute('name', 'usu_ocupacao_descricao' + iteration); 
e5.setAttribute('id', 'usu_ocupacao_descricao' + iteration); 
cellRight5.appendChild(e5); 
} 

function removeRowFromTableEX() 
{ 
var tbl = document.getElementById('experiencias'); 
var lastRow = tbl.rows.length; 
if (lastRow > 2) tbl.deleteRow(lastRow - 1); 
}

Agradeço se alguém puder me ajudar neste caso também.

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0
Guest regina

Guest regina

Postado
Postado

Tentando aqui cheguei ao seguinte script que não funciona nem mostra erro:

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/CARGO
var 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); 

// EMPRESA
var 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); 

// DESLIGAMENTO
var 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ÇÕES
var 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); 
}

Aos que puderem me ajudar, agradeço.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,2k
    • Posts
      651,9k
×
×
  • Criar Novo...