Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

ToComFome

[Resolvido] Tabela dinamica com select recebendo do php

Por , em Javascript

Recommended Posts

ToComFome    0

ToComFome
Postado

Olá, queria tirar duas dúvidas em relação ao meu código...

 

Descrição do meu código: Uma tabela em que eu posso inserir e excluir linhas via DOM. A primeira célula de cada linha é um select em que os options tem que vir de um arquivo php.

 

<?php
session_start();
require 'config_site.php';
?>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>tabela dinamica</title>
        <style type="text/css" media="all">@import "css/estilo.css";</style>        
        <script type="text/javascript" src="js/jquery1.4.2.js"></script>                
        <script type="text/javascript">

            var d = document ;
            window.onload = function(){

                d.getElementById( 'add' ).onclick = function(){
                    var oTable = d.getElementById( 'tabela' ) ;
                    var newTr  = oTable.insertRow( -1 ) ;

                    newTr.setAttribute( 'id' , 'row' + oTable.rows.length ) ;

                    var selector = document.createElement('select');                    
                    selector.id = 'selProduto';
                    selector.name = 'selProduto';
                    selector.setAttribute('style', 'width:200px');

                    var option = document.createElement('option');
                    option.value = '0';
                    option.appendChild(document.createTextNode('Teste 1'));
                    selector.appendChild(option);

                    option = document.createElement('option');
                    option.value = '1';
                    option.appendChild(document.createTextNode('Teste 2'));
                    selector.appendChild(option);

                    newTr.insertCell(0).appendChild( selector ) ;
                    newTr.insertCell(1).appendChild( getInput() ) ;
                    newTr.insertCell(2).appendChild( getInput() ) ;
                    newTr.insertCell(3).appendChild( getInput() ) ;
                    newTr.insertCell(4).appendChild( getInput() ) ;
                    newTr.insertCell(5).appendChild( getInput() ) ;                    
                    newTr.insertCell(6).appendChild( getLinkExcluir( oTable.rows.length ) ) ;
                }
            }

            function getLinkExcluir( rowId )
            {
                var oA = d.createElement( 'a' ) ;
                oA.setAttribute( 'href' , '#' ) ;
                oA.innerHTML =  '<img src="conteudo/error.png" border="0" />' ;
                oA.onclick = function(){ removerTr( rowId ) ; }
                return oA ;
            }                        

            function getInput()
            {
                var oInput = d.createElement( 'input' ) ;
                oInput.setAttribute( 'name' , 'inputs[]' ) ;
                return oInput ;
            }

            function removerTr( rowId )
            {
                var iRow = d.getElementById( 'row' + rowId ).rowIndex ;
                d.getElementById( 'tabela' ).deleteRow( iRow ) ;
                return false ;
            }                        

        </script>        
    </head>
    <body>        
        <form>
            <table border="0" cellpadding="0" cellspacing="0" align="center">
                <tr>
                    <td colspan="4" align="center"> </td>
                </tr>
                <tr>
                    <td width="942" colspan="3" align="center"> <span class="conteudo"><strong>Produtos</strong></span></td></tr>
                <tr>
                    <td colspan="3">
                        <table id='tabela' border="2" cellpadding="0" cellspacing="0">
                            <tr class="arquivos">
                                <td width="180"> Produto </td>
                                <td width="150"> Inserção </td>
                                <td width="150"> Período </td>
                                <td width="150"> Pessoas/Dia </td>
                                <td width="150"> Valor/Inserção </td>
                                <td width="127"> Total </td>
                                <td></td>
                            </tr>

                        </table>
                    </td>
                </tr>
                <tr>
                    <td colspan="3"> </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <table border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr>
                                <td><button class="arquivos" id='add' type='button'>Adicionar Linha</button></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

a primeira dúvida é como fazer para receber os options do select de um arquivo php.

 

a segunda dúvida é como fazer para quando dar o submit no form, recuperar os dados inseridos nos selects e inputs da tabela.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

a primeira dúvida é como fazer para receber os options do select de um arquivo php.

cara, vou te falar 'a maneira simples':

 

Traga esse <select> já na página.. escondido com um display: none;, dê um id qualquer para ele:

<select name="tal" id="tal">
na hora de criar as novas linhas com JS, pegue o .innerHTML desse select, e jogue onde você precisa.

 

 

a segunda dúvida é como fazer para quando dar o submit no form, recuperar os dados inseridos nos selects e inputs da tabela.

 

estude sobre arrays, o ideal do HTML que você vai gerar, é algo como:

<tr id="row2">
<td><select id="selProduto" name="selProduto[]" style="width: 200px;">
<option value="0">Teste 1</option>
<option value="1">Teste 2</option>
</select></td>
<td><input name="insercao[]"></td>
<td><input name="periodo[]"></td>
<td><input name="pessoas_dia[]"></td>
<td><input name="valor[]"></td>
<td><input name="total[]"></td><td><a href="#"><img border="0" src="conteudo/error.png"></a></td>
</tr>

ai você receberá no php, coisas como:

$_POST['total']; //Array

com as posições:

$_POST['total'][0], $_POST['total'][1]...

ai a dúvida já não é mais javascript.

Compartilhar este post

Link para o post
Compartilhar em outros sites

ToComFome    0

ToComFome
Postado

Cara, funcionou mesmo!!! Obrigado!

 

segue código da solução.

 

 

<?php
session_start();
require 'config_site.php';
?>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>tabela dinamica</title>
        <style type="text/css" media="all">@import "css/estilo.css";</style>        
        <script type="text/javascript" src="js/jquery1.4.2.js"></script>                
        <script type="text/javascript">

            var d = document ;
            window.onload = function(){

                d.getElementById( 'add' ).onclick = function(){
                    var oTable = d.getElementById( 'tabela' ) ;
                    var newTr  = oTable.insertRow( -1 ) ;

                    newTr.setAttribute( 'id' , 'row' + oTable.rows.length ) ;                    

                    newTr.insertCell(0).innerHTML = d.getElementById('produto').innerHTML ;
                    newTr.insertCell(1).appendChild( getInput() ) ;
                    newTr.insertCell(2).appendChild( getInput() ) ;
                    newTr.insertCell(3).appendChild( getInput() ) ;
                    newTr.insertCell(4).appendChild( getInput() ) ;
                    newTr.insertCell(5).appendChild( getInput() ) ;                    
                    newTr.insertCell(6).appendChild( getLinkExcluir( oTable.rows.length ) ) ;
                }
            }

            function getLinkExcluir( rowId )
            {
                var oA = d.createElement( 'a' ) ;
                oA.setAttribute( 'href' , '#' ) ;
                oA.innerHTML =  '<img src="conteudo/error.png" border="0" />' ;
                oA.onclick = function(){ removerTr( rowId ) ; }
                return oA ;
            }                        

            function getInput()
            {
                var oInput = d.createElement( 'input' ) ;
                oInput.setAttribute( 'name' , 'inputs[]' ) ;
                return oInput ;
            }

            function removerTr( rowId )
            {
                var iRow = d.getElementById( 'row' + rowId ).rowIndex ;
                d.getElementById( 'tabela' ).deleteRow( iRow ) ;
                return false ;
            }                        

        </script>        
    </head>
    <body>        
        <form>
            <table border="0" cellpadding="0" cellspacing="0" align="center">
                <tr>
                    <td colspan="4" align="center"> </td>
                </tr>
                <tr>
                    <td width="942" colspan="3" align="center"> <span class="conteudo"><strong>Produtos</strong></span></td></tr>
                <tr>
                    <td colspan="3">
                        <table id='tabela' border="2" cellpadding="0" cellspacing="0">
                            <tr class="arquivos">
                                <td width="180"> Produto </td>
                                <td width="150"> Inserção </td>
                                <td width="150"> Período </td>
                                <td width="150"> Pessoas/Dia </td>
                                <td width="150"> Valor/Inserção </td>
                                <td width="127"> Total </td>
                                <td></td>
                            </tr>

                        </table>
                    </td>
                </tr>
                <tr>
                    <td colspan="3"> </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <table border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr>
                                <td><button class="arquivos" id='add' type='button'>Adicionar Linha</button></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <div id="produto" style="display: none;">
                <select style="width:200px;" name="prod" class="arquivos" id="prod" >
                    <?php
                    require 'config_site.php';
                    $sql = "SELECT * FROM produto ORDER BY descricao";
                    $resposta = mysql_query($sql);
                    if($resposta) {
                        while($linha = mysql_fetch_array($resposta)) {
                            $produto = $linha['descricao'];
                            $id_produto = $linha['id_produto'];
                            echo "<option value='$id_produto'>$produto</option>";
                        }
                        
                    }
                    ?>
                </select>                
            </div>
        </form>
    </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito