sexta-feira, 13 de fevereiro de 2015

Este é o exemplo de uma tabela dinâmica, a qual possui as opções de adicionar linha em tabela e remover linha em tabela. No conteúdo das colunas foram adicionados campos de fomulário simulando um cadastro dinâmico. Para estilização da página e efeitos visuais foi adicionado bootstrap, um arquivo em CSS já pronto que existe no site oficial para baixar (http://getbootstrap.com/).  Para que o JQuery faça a tabela funcionar, você pode também baixar no site oficial: (http://jquery.com/download/). Atenção, o pacote de download virá com scripts JS. Você só vai utilizar para este projeto o arquivo jquery.js

Bem para criar o nosso projeto você vai precisar do seguinte arquivo HTML, e poderá nomeá-lo de tabelaDinamica.html :

<!DOCTYPE html> 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Adicionar e Remover Linha com jQuery</title>
    <link href="stylesheets/bootstrap.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/funcao.js"></script>
</head>
<body>

 <div class="container">
<h2>cadastro de Funcionários</h2>
<hr />
<br /><br />
<div class="table-responsive">
<table id="products-table" class="table table-hover table-bordered">
<tbody>
<tr>
 <th>Código de pessoa</th>
 <th>Nome</th>
 <th>Cargo - Função</th>
 <th>E-mail</th>
                          <th>CPF</th>
 <th class="actions">Ações</th>
</tr>
<tr>
 <td><input type="text" name="id"></td>
                          <td><input type="text" name="nome"></td>
 <td><select name="cargo">
         <option value="gerente" name="gerente">Gerente</option>
         <option value="Professor" name="Professor">Professor</option>
  <option value="Programador" name="Programador">Programador</option>
     </select>
                        </td>
                        <td><input type="text" name="email"></td>
<td><input type="text" name="cpf"></td>  
<td class="actions">
  <button class="btn btn-large btn-danger" onclick="RemoveTableRow(this)" type="button">Remover</button>
</td>
</tr>
</tbody>
                <tfoot>
<tr>
   <td colspan="6" style="text-align: left;">
       <button class="btn btn-large btn-success" onclick="AddTableRow(this)" type="button">Adicionar Funcionário</button>
   </td>
</tr>
               </tfoot>
</table>
</div>
</div>

 </body>
</html>

 Entendendo o código: O que este HTML basicamente faz é criar uma tabela que possui um id products-table que tem relação com  o JQuery. Possui uma class chamada table table-hover table-bordered   responsável por chamar as funções CSS do nosso arquivo bootstrap.css que irá fazer a estilização da nossa tabela. cria campos de formulário a serem preenchido, e no final tem-se um botão adicionar funcionário que tem acesso a função AdTableRow(this), encontrada no arquivo funcao.js que cria uma nova linha na tabela. Há o botão remover que também tem ação em um método RemoveTableRow(this), para remover esta linha encontrado no arquivo funcao.js. E cada um desses botões possui uma class responsável por chamar a função CSS do arquivo bootstrap.css que faz a estilização dos botões. 
Próximo arquivo: funcao.js

 (function($) {

   RemoveTableRow = function(handler) {
    var tr = $(handler).closest('tr');

     tr.fadeOut(400, function(){ 
      tr.remove(); 
    }); 

     return false;
  };
  
  AddTableRow = function() {
      
      var newRow = $("<tr>");
      var cols = "";
      
      cols += '<td><input type="text" name="id"></td>';

       cols += '<td><input type="text" name="nome"></td>'; 
      
      cols += '<td><select name="cargo">'; 
      cols += '<option value="gerente" name="gerente">Gerente</option>';
      cols += '<option value="Professor" name="Professor">Professor</option>';
      cols += '<option value="Programador" name="Programador">Programador</option>';
      cols += '</select></td>';

       cols += '<td><input type="text" name="email"></td>'; 

       cols += '<td><input type="text" name="cpf"></td>'; 
      
      cols += '<td class="actions">';
      cols += '<button class="btn btn-large btn-danger" onclick="RemoveTableRow(this)" type="button">Remover</button>';
      cols += '</td>';
      
      newRow.append(cols);
      
      $("#products-table").append(newRow);
    
      return false;
  };
  

})(jQuery);
Este arquivo que criamos tem as funções de remover linha em tabela e adicionar linha em tabela. As quais dependem do arquivo jQuery. 

 Então é isto: Para fazer este sistema funcionar crie esses dois arquivos HTML(tabelaDinamica.html) e JS (funcao.js) e baixe os arquivos bootstrap.css e jquery.js. 

 Atenção quanto a pasta dos arquivos. Nesse exemplo nós consideramos que os arquivos JavaScript estaríam dentro de uma pasta chamada js.  E o bootstrap.css estaria na pasta stylesheets.

Imagens do sistema:


Tabela dinâmica com JQuery e função JavaScript

10:53 ,

Primeiro crie o seguinte arquivo HTML chamado selectDinamico.html

<html> 
  <head> 
    <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" /> 
    <title>Combobox dinâmico</title> 
<script language="JavaScript" src="comboDinamico.js"></script>
</head>
<body>
  <h1>Select dinâmico em JavaScript</h1>
<label for="estado">Estado</label>
     <select id="continent" onchange="comboDinamica(this);">
        <option value="empty">Selecione um Estado</option>
        <option value="SaoPaulo">São Paulo</option>
<option value="RioGrandedoSul">Rio Grande do Sul</option>
<option value="SantaCatarina">Santa Catarina</option>
     </select>
  <br/><br/>
  <label>Cidade</label>
  <select id="atributo1">
    <option value="0">Cidade</option>
  </select>
</body>
</html>


Em seguida crie este arquivo Javascript com o seguinte nome: comboDinamico.js

var countryLists = new Array(5) 

  countryLists["empty"] = ["Selecione um Estado"]; 
 countryLists["RioGrandedoSul"] = ["Alvorada", "Porto Alegre", "Bom Jesus", "Capivari do Sul"]; 
 countryLists["SaoPaulo"] = ["Artur Nogueira", "Balbinos", "BARRETOS", "São Paulo", "GUARULHOS"]; 
 countryLists["SantaCatarina"] = ["Florianópolis", "Biguaçu", "São José", "Palhoça", "Lages", "Tijucas", "Balneário Camboriú"]; 

  function comboDinamica(selectObj) { 
 // get the index of the selected option 
 var idx = selectObj.selectedIndex; 
 // get the value of the selected option 
 var which = selectObj.options[idx].value; 
 // use the selected option value to retrieve the list of items from the countryLists array 
 cList = countryLists[which]; 
 // get the country select element via its known id 
 var cSelect = document.getElementById("atributo1"); 
 // remove the current options from the country select 
 var len=cSelect.options.length; 
 while (cSelect.options.length > 0) { 
 cSelect.remove(0); 
 } 
 var newOption; 
 // create new options 
 for (var i=0; i<cList.length; i++) { 
 newOption = document.createElement("option"); 
 newOption.value = cList[i];  // assumes option string and value are the same 
 newOption.text=cList[i]; 
 // add the new option 
 try { 
 cSelect.add(newOption);  // this will fail in DOM browsers but is needed for IE 
 } 
 catch (e) { 
 cSelect.appendChild(newOption); 
 } 
 } 
 } 
Entendendo o que está acontecendo: primeiramente nós criamos dois selects. Um com as options de Estados, e o outro sem options, pois serão apresentadas dinamicamente quando determinada option do primeiro select forem selecionadas. O primeiro select tem ação onChange no método comboDinamica(this);  que se encontra no arquivo javascript. Este método é responsável por fazer a associação das opções entre as combobox. 

Combobox Dinâmica com JavaScript usando arrays

09:30 ,
Assinar: Postagens (Atom)

 
Academy Programming © 2015 - Designed by Templateism.com