
Thabata Sá
Membros-
Total de itens
9 -
Registro em
-
Última visita
Sobre Thabata Sá

Perfil
-
Gender
Female
-
Location
Minas Gerais
Thabata Sá's Achievements
0
Reputação
-
Remover elementos, criados dinamicamente, através do id da
pergunta respondeu ao Thabata Sá de Thabata Sá em Ajax, JavaScript, XML, DOM
PHP e SQL ... Ps. estou usando javascript para criação dinâmica... -
Remover elementos, criados dinamicamente, através do id da
pergunta respondeu ao Thabata Sá de Thabata Sá em Ajax, JavaScript, XML, DOM
Boa tarde pessoal, Bom, estou com um probleminha com código acima. É o seguinte, eu preciso inserir no BD os itens criados dinamicamente, para isso, concateno ao nome/id do elemento um índice e depois faço um FOR, que faz pega os values do form e faz X insert's(de acordo com a qtde de itens adicionados), o problema, é que eu não consigo recuperar os índices da linhas caso algum item seja excluído(a ordem muda). Por exemplo, se eu vou inserir os itens sem excluir (ordem 1, 2 e 3), ele funciona, pois é possível fazer com a sequência dor FOR, mas se algum item é excluído (a ordem fica, 1, 3, 4, por ex), já não tem como fazer o FOR. Pensei em duas soluções mas não consegui implementa-las. Primeira, fazer com que os itens se organizem de forma sequencial mesmo um item sendo excluído (sempre ficaria 1,2,3,4...) ou pegar os índices(1,3,4...) através de um array para recuperar os values dos campos e depois inseri-los como 1,2,3,4 no banco. Se alguém puder ajudar... Desde já, muito obrigada! -
Remover elementos, criados dinamicamente, através do id da
pergunta respondeu ao Thabata Sá de Thabata Sá em Ajax, JavaScript, XML, DOM
Romerito, mais uma vez, muito obrigada! Era exatamente isto, e eu fiquei o dia todo quebrando a cabeça aqui! Valeu! =) Abs, Thabata -
Boa tarde pessoal, Estou precisando remover uma linha, de uma tabela, que contêm elementos criados dinamicamente pelo javascript, através do idda linha, acontece que ele está removendo apenas a última linha adicionada. Não conheço muito de DOM, por isso estou com dúvidas na sua sintaxe. Gostaria que alguém me ajudasse. Abaixo, o código: Desde já, muito obrigada! <html> <head> <script language="JavaScript" type="text/javascript"> var input_cont = 2; //********************************************************************************************** //********************************* INICIA A FUNÇÃO PARA ADICIONAR ITENS *********************** //*********************************************************************************************** function addItem(){ add_item_div = document.getElementById('add_item_div'); linha = new Array(); coluna1 = new Array(); coluna2 = new Array(); coluna3 = new Array(); linha2 = new Array(); coluna12 = new Array(); //Cria os elementos para construção da tabela table = document.createElement("table"); linha[input_cont] = document.createElement("tr"); coluna1[input_cont] = document.createElement("td"); coluna2[input_cont] = document.createElement("td"); coluna3[input_cont] = document.createElement("td"); linha2[input_cont] = document.createElement("tr"); coluna12[input_cont] = document.createElement("td"); // Define propriedades da tabela table.setAttribute('border','1'); coluna1[input_cont].setAttribute('width', '18'); coluna1[input_cont].setAttribute('align', 'center'); coluna1[input_cont].setAttribute('bgcolor', '#F4FDF8'); table.setAttribute('width', '995'); coluna12[input_cont].colSpan = '15'; linha[input_cont].setAttribute('id', 'linha_' + input_cont ); //******************************** CRIA TEXT new_txt = document.createTextNode(input_cont);// cria o conteúdo da célula new_rec = document.createTextNode('Reconstituição');// cria o conteúdo da célula //******************************** Cria BOTÃO para EXCLUIR btn_excluir = document.createElement("img"); btn_excluir.setAttribute('name', 'btn_excluir'); btn_excluir.setAttribute('id', 'excluir_' + input_cont); btn_excluir.setAttribute('onclick', 'java script:deletaCampo('+input_cont+')'); btn_excluir.setAttribute('style', 'width:25px; height:20px; cursor:pointer'); btn_excluir.setAttribute('src', 'lixeira_3.png') btn_excluir.setAttribute('title', 'Excluir Item') //********************************* Cria INPUT para ESQUEMA new_esquema = document.createElement('input'); new_esquema.setAttribute('type', 'text'); new_esquema.setAttribute('name', 'esquema_'+input_cont); new_esquema.setAttribute('id', 'esquema_'+input_cont); new_esquema.setAttribute('value', ''); new_esquema.setAttribute('size', '5'); //add_item_div.appendChild(new_input); //********************************* Cria SELECT para ÍTEM a_item = new Array( "Selecione..." , "Item 1" , "Item 2" , "Item 3"); new_item = document.createElement( 'select' ); new_item.setAttribute( 'name' , 'item_' + input_cont ); new_item.setAttribute( 'id' , 'item_' + input_cont ); new_item.setAttribute( 'style' , 'width:95'); //add_item_div.appendChild( new_select ); 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]; new_item.appendChild( newOption ); } //********************************* Cria SELECT para CÓDIGO a_codigo = new Array( "Selecione..." , "Código 1" , "Código 2" , "Código 3"); new_codigo = document.createElement( 'select' ); new_codigo.setAttribute( 'name' , 'codigo_' + input_cont ); new_codigo.setAttribute( 'id' , 'codigo_' + input_cont ); new_codigo.setAttribute( 'style' , 'width:95'); //add_item_div.appendChild( new_select ); meuSelect = document.getElementById( 'codigo' + input_cont ); for ( var i = 0; i <= 3; i++ ) { newOption = document.createElement( 'option' ); newOption.setAttribute( 'value' , a_codigo[i] ); newOption.innerHTML = a_codigo[i]; new_codigo.appendChild( newOption ); } //********************************* Cria INPUT para RECONSTITUICAO new_reconstituicao = document.createElement('input'); new_reconstituicao.setAttribute('type', 'text'); new_reconstituicao.setAttribute('name', 'reconstituicao_'+input_cont); new_reconstituicao.setAttribute('id', 'reconstituicao_'+input_cont); new_reconstituicao.setAttribute('value', ''); new_reconstituicao.setAttribute('size', '145'); tbody = document.createElement("tbody"); //coluna1.innerHTML = input_cont; //campo2.innerHTML = "Campo da tabela "; // Atribui as colunas dentro de cada linha e o seu conteúdo linha[input_cont].appendChild(coluna1[input_cont]); coluna1[input_cont].appendChild(new_txt); coluna1[input_cont].appendChild(btn_excluir); linha[input_cont].appendChild(coluna2[input_cont]); coluna2[input_cont].appendChild(new_esquema); linha[input_cont].appendChild(coluna3[input_cont]); coluna3[input_cont].appendChild(new_item); linha2[input_cont].appendChild(coluna12[input_cont]); coluna12[input_cont].appendChild(new_rec); coluna12[input_cont].appendChild(new_reconstituicao); // Associa a tabela ao corpo da página tbody.appendChild(linha[input_cont]); tbody.appendChild(linha2[input_cont]); table.appendChild(tbody); add_item_div.appendChild(table); input_cont++; } //********************************************************************************************** //********************************* FIM DA FUNÇÃO PARA ADICIONAR ITENS *********************** //********************************************************************************************** function deletaCampo(id){ alert(id) if (add_item_div.childNodes.length != 0){ alert('Tem Nodes') } else alert('Não tem Nodes') tbody.removeChild(linha[id]); tbody.removeChild(linha2[id]); table.removeChild(tbody); // add_item_div.removeChild(table); } function countTags(n){ var numtags = 0; if(n.nodeType ==1) numtags++; var children = n.childNodes; for( var i=0; 1< children.legth; i++){ numtags += countTags(children[i]); } return numtags; } //alert(countTags(document)) </script> <link rel="stylesheet" href="estilo.css" type="text/css"> </head> <body onLoad="alert(countTags(document))"> <form method="post" name="frm" id="frm" action=""> <div id="add_item_div"></div> <center><input type="button" value="Adicionar Ítem" name="add_input" id="add_input" onClick="addItem()" class="btn_acoes"/></center> </form> </body> </html>
-
(Resolvido) Inserir Tabela em função JS
pergunta respondeu ao Thabata Sá de Thabata Sá em Ajax, JavaScript, XML, DOM
Perfeito! Obrigada mesmo! Abraços! -
(Resolvido) Inserir Tabela em função JS
pergunta respondeu ao Thabata Sá de Thabata Sá em Ajax, JavaScript, XML, DOM
Isto mesmo que eu queria! Obrigada! =) Só uma dúvida: por que não aparece a borda das colunas? -
(Resolvido) Inserir Tabela em função JS
pergunta respondeu ao Thabata Sá de Thabata Sá em Ajax, JavaScript, XML, DOM
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... <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'> "+p_numite+" </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 <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> -
(Resolvido) Inserir Tabela em função JS
pergunta respondeu ao Thabata Sá de Thabata Sá em Ajax, JavaScript, XML, DOM
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 -
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>