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

(Resolvido) Inserir Tabela em função JS

Thabata Sá

Perguntado por Thabata Sá,

 Share

Pergunta

Thabata Sá

Thabata Sá

Postado
Postado (editado)

Bom dia pessoal,

Tenho uma função em JavaScript para criar objetos dinamicamente, mas preciso que o conjunto de objetos fiquem dentro de uma tabela (uma linha e 5 colunas). Como posso fazer isto?

Segue abaixo o código da função:

<script language="JavaScript">   
var input_cont = 0;  
  
function addItem(){  
var add_item_div = document.getElementById('add_item_div'); 
     
    //********************************* Cria INPUT para ESQUEMA
        var new_input = document.createElement('input');   
        new_input.setAttribute('type', 'text');   
        new_input.setAttribute('name', 'input_'+input_cont);   
        new_input.setAttribute('id', 'input_'+input_cont);   
        new_input.setAttribute('value', ''); 
        new_input.setAttribute('size', '5');  
  
        add_item_div.appendChild(new_input);
        

//********************************* Cria SELECT para ÍTEM
    var a_item = new Array( "Selecione..." , "Ítem 1" , "Ítem 2" , "Ítem 3");

    var new_select = document.createElement( 'select' );
        new_select.setAttribute( 'name' , 'item' + input_cont );
        new_select.setAttribute( 'id'   , 'item' + input_cont );
        add_item_div.appendChild( new_select );

    var meuSelect = document.getElementById( 'item' + input_cont );

    for ( var i = 0; i <= 3; i++ )
    {
        newOption = document.createElement( 'option' );
        newOption.setAttribute( 'value' , a_item[i] );
        newOption.innerHTML = a_item[i];
        meuSelect.appendChild( newOption );
    }

//********************************* Cria SELECT para UNIDADE
    var a_unidade = new Array( "Selecione..." , "Unidade 1" , "Unidade 2" , "Unidade 3");

    var new_select = document.createElement( 'select' );
        new_select.setAttribute( 'name' , 'unidade' + input_cont );
        new_select.setAttribute( 'id'   , 'unidade' + input_cont );
        add_item_div.appendChild( new_select );

    var meuSelect = document.getElementById( 'unidade' + input_cont );

    for ( var i = 0; i <= 3; i++ )
    {
        newOption = document.createElement( 'option' );
        newOption.setAttribute( 'value' , a_unidade[i] );
        newOption.innerHTML = a_unidade[i];
        meuSelect.appendChild( newOption );
    }

//********************************* Cria SELECT para VIA
    var a_via = new Array( "Selecione..." , "Via 1" , "Via 2" , "Via 3");

    var new_select = document.createElement( 'select' );
        new_select.setAttribute( 'name' , 'via' + input_cont );
        new_select.setAttribute( 'id'   , 'via' + input_cont );
        add_item_div.appendChild( new_select );

    var meuSelect = document.getElementById( 'via' + input_cont );

    for ( var i = 0; i <= 3; i++ )
    {
        newOption = document.createElement( 'option' );
        newOption.setAttribute( 'value' , a_via[i] );
        newOption.innerHTML = a_via[i];
        meuSelect.appendChild( newOption );
    }
        
//********************************* Cria TEXT AREA para OBSERVAÇÂO
  var new_textarea = document.createElement('textarea');   
  new_textarea.setAttribute('name', 'textarea_'+input_cont);   
  new_textarea.setAttribute('id', 'textarea_'+input_cont); 
  new_textarea.setAttribute('row', '5');
    new_textarea.setAttribute('cols', '16,5');
  add_item_div.appendChild(new_textarea);


    input_cont++;   


}   
  
</script>

Editado por Thabata Sá
Link para o comentário
Compartilhar em outros sites

8 respostass a esta questão

Posts Recomendados

  • 0
Tash

Tash

Postado
Postado

Então, Thabata!

Você já conhece algo sobre JavaScript ou DOM? Sugiro que você dê uma pequena estudada na linguagem, que não é complexa.

Por exemplo, onde você encontra um

document.createElement('input');

significa que você está criando um elemento input, ou seja, um <input> no documento! Simples, né?

Aqui tem um guia completo sobre o DOM: http://www.w3schools.com/htmldom/default.asp

E aqui sobre o java script: http://www.w3schools.com/js/default.asp

Link para o comentário
Compartilhar em outros sites
  • 0
Thabata Sá

Thabata Sá

Postado
  • Autor
Postado

Isto significa que eu posso criar document.createElement( 'table' ) e assim, por diante, certo?

Já tentei algo parecido, mas não deu certo, fiz desta forma:

var add_item_div = document.getElementById('add_item_div'); 

// a_table -> abre table , f_table -> fecha table
        var a_table = document.createElement('table');
        var a_tr = document.createElement('tr');
        var a_td = document.createElement('td');
        var f_tr = document.createElement('/tr');
        var f_td = document.createElement('/td');
        var f_table = document.createElement('/table');
    
    
    //********************************* Cria INPUT para ESQUEMA
        add_item_div.appendChild(a_table);
                add_item_div.appendChild(a_tr);
                        add_item_div.appendChild(a_td);
    
            var new_input = document.createElement('input');   
            new_input.setAttribute('type', 'text');   
            new_input.setAttribute('name', 'input_'+input_cont);   
            new_input.setAttribute('id', 'input_'+input_cont);   
            new_input.setAttribute('value', ''); 
            new_input.setAttribute('size', '5');  
  
        add_item_div.appendChild(new_input);

        add_item_div.appendChild(f_td);    
            add_item_div.appendChild(f_tr);    
                add_item_div.appendChild(f_table);

Obs. Conheço pouco de JavaScript, trabalho mesmo é com Php mas muitas vezes é necessário alguma interferência do JS, aí tenho que recorrer à quem sabe.. rsrs

Link para o comentário
Compartilhar em outros sites
  • 0
Romerito

Romerito

Postado
Postado

i aew Thabata Sá, bom já que tu não manja muito de js acho mais facil você fazer dessa maneira, além do que economiza muitas linhas de código.

assim:

<script language="JavaScript" type="text/javascript">
window.onload = function(){
    criaTabela();
}

var input_cont = 0;
function criaTabela()
{
    var minhaDiv = document.getElementById( 'tabela' );
    var tabela   =    "<table>";
        tabela    +=        "<tr>";
        tabela    +=            "<td>Meu Input: <input type='text' name='input_" + input_cont + "'</td>";
        tabela    +=        "</tr>";
        tabela    +=    "</table>";
    minhaDiv.innerHTML  = tabela;
    input_cont++;
}
</script>

<div id='tabela'></div>

espero que entenda como funciona, abraço.

Link para o comentário
Compartilhar em outros sites
  • 0
Thabata Sá

Thabata Sá

Postado
  • Autor
Postado (editado)

Romerito, obrigada pela ajuda, mas não resolve o meu problema.

Já tentei desta forma, com o código abaixo e acontece que, ao inserir um novo ítem( chama a função addItem) ele apaga o que foi digitado e/ou escolhido nos itens anteriores, uma vez que ele "escreve" novamente. E eu preciso que os dados já inseridos, continuem na tela. Quando crio os objetos(código do post 1º post), ele funciona, porém não consigo colocar a tabela...

&lt;script language="JavaScript">   
var input_cont = 0;   

function addItem(p_numite){  
    //alert(p_numite);
//    var v_div = document.getElementById('tab_Itens').innerHTML;
    var v_div = document.getElementById('add_item_div').innerHTML;
    
    v_div += "<table width='995' border='1'>";
    v_div += "  <tr>";
    v_div += "    <td width='18' ><span class='style1'>&nbsp;"+p_numite+"&nbsp;</span></td>";
    v_div += "    <td><input type='text' value='' size='5'></td>";
    v_div += "    <td><select><option>Selecione...</option><option>Ítem 1</option><option>Ítem 2</option></select></td>";
    v_div += "    <td><select><option>Selecione...</option><option>Código 1</option><option>Código 2</option></select></td>";
    v_div += "    <td><input type='text' value='' size='10'></td>";
    v_div += "    <td><input type='text' value='' size='5'></td>";
    v_div += "    <td><select><option>Selecione...</option><option>Unidade 1</option><option>Unidade 2</option></select></td>";
    v_div += "    <td><select><option>Selecione...</option><option>Via 1</option><option>Via 2</option></select></td>";
    v_div += "    <td><select><option>Selecione...</option><option>Intervalo 1</option><option>Intervalo 2</option></select></td>";
    v_div += "    <td width='69'><input type='text' value='' size='5'></td>";
    v_div += "    <td><textarea row='5' cols='16,5'></textarea></td>";
    v_div += "  </tr>";
    v_div += "  <tr>";
    v_div += "    <td colspan='15'>Reconstituição &nbsp;&nbsp; <input type='text' value='' size='80'></td>";
    v_div += "    </tr>";

    v_div += "</table>";
    document.getElementById('add_item_div').innerHTML = v_div
    

        var v_newnum = p_numite+1;
    //  alert(v_newnum);
        
        var browserName=navigator.appName; 
        if (browserName=="Netscape"){ 
            //alert("FireFox Netscape");
            document.getElementById('add_input').setAttribute("onclick", "addItem("+v_newnum+")");
        }
        else{ 
            if (browserName=="Microsoft Internet Explorer"){
            //alert("Explorer");
            document.getElementById('add_input').setAttribute("onclick", function(){addItem(v_newnum)});
            }
        }
    
    //    alert(v_div) 

}   

</script> 


<div id='add_item_div'></div>
<center><input type="button" value="Adicionar Ítem" name="add_input" id="add_input" onClick="addItem(1)" /></center>

Editado por Thabata Sá
Link para o comentário
Compartilhar em outros sites
  • 0
Romerito

Romerito

Postado
Postado

aew carinha eu acho que entende o que tu tava falando, quando você adicionava outra tabela, os campos resetavam no FF né?

tenta assim:

<script language="JavaScript" type="text/javascript">

function addItem(p_numite){

    var p_div = document.getElementById( 'add_item_div' );
    var v_div = "";
    var novaDiv = document.createElement( 'div' );
         p_div.appendChild( novaDiv );

    v_div += "<table width='995' style='border:1px solid; margin-top:3px;'>";
    v_div += "  <tr>";
    v_div += "    <td width='18' ><span class='style1'>&nbsp;"+p_numite+"&nbsp;</span></td>";
    v_div += "    <td><input type='text' value='' size='5'></td>";
    v_div += "    <td><select><option>Selecione...</option><option>Ítem 1</option><option>Ítem 2</option></select></td>";
    v_div += "    <td><select><option>Selecione...</option><option>Código 1</option><option>Código 2</option></select></td>";
    v_div += "    <td><input type='text' value='' size='10'></td>";
    v_div += "    <td><input type='text' value='' size='5'></td>";
    v_div += "    <td><select><option>Selecione...</option><option>Unidade 1</option><option>Unidade 2</option></select></td>";
    v_div += "    <td><select><option>Selecione...</option><option>Via 1</option><option>Via 2</option></select></td>";
    v_div += "    <td><select><option>Selecione...</option><option>Intervalo 1</option><option>Intervalo 2</option></select></td>";
    v_div += "    <td width='69'><input type='text' value='' size='5'></td>";
    v_div += "    <td><textarea row='5' cols='16,5'></textarea></td>";
    v_div += "  </tr>";
    v_div += "  <tr>";
    v_div += "    <td colspan='15'>Reconstituição &nbsp;&nbsp; <input type='text' value='' size='80'></td>";
    v_div += "    </tr>";
    v_div += "</table>";

    novaDiv.innerHTML = v_div;

    var v_newnum = p_numite + 1;

    var browserName = navigator.appName;

    if (browserName=="Netscape"){
        document.getElementById( 'add_input' ).setAttribute( "onclick" , "addItem(" + v_newnum+ ")" );
    }
    else{
        if (browserName=="Microsoft Internet Explorer"){
               document.getElementById( 'add_input' ).setAttribute( "onclick" , function(){ addItem( v_newnum ) } );
        }
    }
}

</script>
<div id='add_item_div'></div>
<center><input type="button" value="Adicionar Ítem" name="add_input" id="add_input" onClick="addItem(1)" /></center>

espero que funcione abraço.

Link para o comentário
Compartilhar em outros sites
  • 0
Romerito

Romerito

Postado
Postado
Só uma dúvida: por que não aparece a borda das colunas?

muda essa linha:

v_div += "<table width='995' style='border:1px solid; margin-top:3px;'>";
para: 
v_div += "<table width='995' border='1'>";

eu mudei quando estava testando heheh, fico feliz que funcionou, abraç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,3k
    • Posts
      652,3k
×
×
  • Criar Novo...