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

(Resolvido) Inserir Tabela em função JS


Thabata Sá

Pergunta

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

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

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

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

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

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
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.



  • Estatísticas dos Fóruns

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