Jump to content
Sign in to follow this  
filipex_27

Adicionar linha a tabela mantendo os eventos

Recommended Posts

filipex_27

Boas, tenho uma tabela que é criada dinamicamente, ou seja, o utilizador adiciona as linhas que precisa à tabela...o meu problema é que ao adicionar a linha os eventos que estao associados às colunas não são mantidos...

<p style="margin-bottom:40px">
        <label>Prestador de Serviço: </label><select id="tipo_fornecedor" name="tipo_fornecedor"><option value="sim">Sim</option><option value="nao">Não</option></select>  
    </p>

<table class="ui-corner-all" id="table_dados">
             <thead>
                 <tr>
                     <th>Pessoas</th>
                     <th>Sociedade</th>
                     <th>Dossier Forn.</th>
                     <th>Visita Periódica</th>
                     <th>Inicio</th>
                     <th>Fim</th>
                     <th>Requisitante</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
                 <td> <input type="text" name="pessoas[]" class="ui-state-default ui-corner-all" /></td>
                 <td> <input type="text" name="sociedade[]" class="ui-state-default ui-corner-all" /></td>
                 <td> <input type="text" name="doss_forn[]" class="dossier ui-state-default ui-corner-all" /></td>
                 <!--<td>  <input type="text" name="vis_per[]"  size="10"  class="ui-state-default ui-corner-all" /></td>-->
                 <td> <select style="width:100%" name="vis_per[]" class="ui-state-default ui-corner-all visita">
                         <option value="sim">Sim</option>
                         <option value="nao">Nao</option>
                     </select>
                 </td>
                 <td> <input type="text" name="chegada[]" size="4"   class="chegada ui-state-default ui-corner-all" /></td>
                 <td> <input type="text" name="partida[]" size="4" class="partida ui-state-default ui-corner-all" /></td>
                 <td> <input type="text" name="requisitante[]"  class="req ui-state-default ui-corner-all" /></td><!--style="width:200px"-->
                 <td> <div class="addButton" >add   </div></td>
                 <td> <div class="delButton" >del</div></td>
                 </tr>
             </tbody>
         </table>

$("#tipo_fornecedor").change(function(){
        //alert("change fornecedor");
        var tipo_fornecedor = $("#tipo_fornecedor").val();
        if(tipo_fornecedor === "nao"){
        $(".dossier").css("background-color","#ccc");
        }else{
            $(".dossier").css("background-color","#F1F1F1");
        }
});



    $("#table_dados").delegate('.addButton','click',function(event) {
        var newRow = $('<tr><td> <input type="text" name="pessoas[]"  class="ui-state-default ui-corner-all" /></td><td> <input type="text" name="sociedade[]"  class="ui-state-default ui-corner-all"/> </td> <td> <input type="text" name="doss_forn[]"  class="dossier ui-state-default ui-corner-all"/>    </td>        <td> <select style="width:100%" name="vis_per[]" class="ui-state-default ui-corner-all visita"> <option value="sim">Sim</option><option value="nao">Nao</option></select></td><td><input type="text" name="chegada[]" size="4" class="chegada ui-state-default ui-corner-all"/>          </td>                <td> <input type="text" name="partida[]"  size="4" class="partida ui-state-default ui-corner-all"/>          </td>                <td> <input type="text" name="requisitante[]"  class="req ui-state-default ui-corner-all" /></td><td><div class="addButton" /></div></td><td><div class="delButton" /></div></td></tr>');
        //$clone = newRow.clone(true);
        $("#table_dados > tbody:last").append(newRow);
        newRow.find('.req').autocomplete({source: "procura_responsavel.php"});
        newRow.find('.chegada').datetimepicker({ dateFormat: 'yy-mm-dd',separator: ' ' });
        newRow.find('.partida').datetimepicker({ dateFormat: 'yy-mm-dd',separator: ' ' });
        
  });


$(".addButton").button({
    icons: {
               primary: 'ui-icon-circle-plus'
    }
    });
     $(".delButton").button({
        icons: {
                primary: 'ui-icon-circle-minus'
    }
    });
$('.delButton').click(function(){
    var len = $('tr').length;
    
    if(len > 2){
        $('#table_dados tr:last').remove();
    }

    });

Tenho um select que altera a cor das colunas...se o utilizador introduzir todas as linhas e alterar o select o código funciona...o problema está quando o utilizador seleciona primeiro o select para alterar a cor e depois adiciona a linha...

podem ver o exemplo aqui: http://jsfiddle.net/filipex_27/rvh6f/

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.