Ejemplos para ocultar y mostrar DIVS HTML

Primero hacemos las funciones una para cada boton

   1: function Agregar(){ 
   2:          document.getElementById("usuarioslocos").style.display = "none";
   3:         document.getElementById("divpararegistrar").style.display = "table";
   4:     }
   5:  
   6:     function Eliminar(){ 
   7:         if(obtenerRadioSeleccionado("form", "radios")!=false){
   8:             if(confirm("Deseas Realmente eliminar este registro?")){
   9:                 var id = obtenerRadioSeleccionado("form", "radios").value;
  10:                 location.href= "<?=base_url() ?>index.php/welcome/deleteUserId/" + id;
  11:             }
  12:                         else{ }
  13:         }
  14:         else{alert("No a seleccionado un registro !!");}
  15:     }
  16:  
  17:  
  18:     function Editar(){ 
  19:         
  20:                     if(obtenerRadioSeleccionado("form", "radios")!=false){
  21:             if(confirm("Desea Modificar el registro?")){
  22:                 var id = obtenerRadioSeleccionado("form", "radios").value;
  23:                 location.href= "<?=base_url() ?>index.php/welcome/updateUserId/" + id;
  24:             }
  25:                         else{ }
  26:         }
  27:         else{alert("No a seleccionado un registro !!");}
  28:     }

 


Creamos los botones y le asignamos una función a cada una



   1: <button onclick="Agregar()" type="button">Agregar</button>
   2:         <button onclick="Editar()" type="button">Editar</button>
   3:         <button onclick="Eliminar()" type="button">Eliminar</button>
   4:         <button onclick="PDF()" type="button">PDF</button>

Luego configuramos los divs



   1: <div id="usuarioslocos">
   2:             <table border="0" align="center" id="tabla">
   3:             <tr bgcolor="#7362ec" align="center" onmouseover='this.style.backgroundColor='#E13300''
   4:                                                  onmouseout='this.style.backgroundColor='#7362ec''>
   5:             
   6:             <td><b>ID</b></td>
   7:             <td><b>NOMBRE </b></td> 
   8:             <td><b>APELLIDO</b></td> 
   9:             <td><b>RFC</b></td>
  10:             <td><b>CONTRASEÑA CERTIFICADO</b></td>
  11:             <td><b>CERTIFICADO</b></td>
  12:             <td><b>LLAVE</b></td>
  13:             <td><b>SELECCIONAR</b></td>
  14:             </tr>
  15:             <tr>
  16:     
  17:             <?php
  18:             $colorfila=0;
  19:             
  20:             
  21:             if($records!=false){
  22:                foreach($records->result() as $row){
  23:                    if ($colorfila==0){ 
  24:                    $color= "#b5b5b5"; 
  25:                    $colorfila=1; 
  26:                     }else{ 
  27:                    $color="#f7f7f7"; 
  28:                    $colorfila=0; 
  29:                 }    
  30:                 echo "<tr bgcolor='".$color."' align='center' ";?> onmouseover="this.style.backgroundColor='#E13300'"
  31:                                                                    onmouseout="this.style.backgroundColor='<?php echo $color;?>'">
  32:                                                                 
  33:                                                                 <?php
  34:                 echo "<td>";
  35:                 
  36:                 echo pintar($busqueda,$row->Cliente)." </td>
  37:                  <td>".pintar($busqueda,$row->Nombre)."</td>
  38:                 <td> ".pintar($busqueda,$row->Apellido)."</td>
  39:                 <td > ".pintar($busqueda,$row->RFC)."</td> 
  40:                 <td>".pintar($busqueda,$row->contraCertificado)."</td>
  41:                 <td>".pintar($busqueda,$row->nombreCertificado)."</td>
  42:                 <td>".pintar($busqueda,$row->nombreLlave)."</td>
  43:                 
  44:                 
  45:                 
  46:                 <td><input type='radio' name='radios' value='".$row->Cliente."'>";
  47:         
  48:                 echo "</td></tr>";
  49:             }
  50:             
  51:         }
  52:         ?>
  53:         
  54:         </table>
  55:         </div>
  56:  
  57:     </div>
  58: </form>
  59:  
  60: </div><?php
  61: //echo $this->table->generate($records);
  62: //Creamos la páginación
  63:  echo $this->pagination->create_links();
  64:  ?>
  65:  </div>
  66:  
  67:  <!--FIN DEL DIV DE LA TABLA DE USUARIOS-->
  68:  
  69:  
  70:  
  71:  
  72:  
  73:  <div id="divpararegistrar" hidden="true">
  74:  
  75:  <html>
  76:     <head>
  77:         
  78:         
  79:         <?php $jjq = base_url()."js/jquery-latest.js";
  80:               $jja = base_url()."js/jquery.validate.js";
  81:     
  82:     echo "<script src='$jjq'></script>";
  83:     echo "<script src='$jja'></script>";
  84:     
  85:     ?>
  86:  
  87:         <style type="text/css">
  88:  
  89:             * { font-family: Verdana; font-size: 96%; }
  90:             label { width: 10em; float: left; }
  91:             label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
  92:             p { clear: both; }
  93:             .submit { margin-left: 12em; }
  94:             em { font-weight: bold; padding-right: 1em; vertical-align: top;                     }
  95:         </style>
  96:               
  97: <script> 
  98: function validar(esto){ 
  99: valido=false; 
 100: for(a=0;a<esto.elements.length;a++){ 
 101: if(esto[a].type=="checkbox" && esto[a].checked==true){ 
 102: valido=true; 
 103: break 
 104: } 
 105:  
 106: } 
 107: if(!valido){ 
 108: alert("Chequee una casilla!");return false 
 109: } 
 110:  
 111: }  
 112:  
 113:  
 114: </script>  
 115:             <script type="text/javascript">
 116:  
 117: $(document).ready(function(){
 118: $("body div:last").remove();
 119: });
 120: </script>
 121:  
 122:          <script>
 123:   $(document).ready(function(){
 124:  $("#registro").validate({
 125:   rules: {
 126:     nom_usu: {
 127:       required: true,
 128:       maxlength: 25,
 129:       minlength:    3
 130:     },
 131:     
 132:     login: {
 133:       required: true,
 134:        maxlength: 2,
 135:       minlength:    2,
 136:       number: true
 137:     },
 138:     
 139:     psw: {
 140:       required: true,
 141:        maxlength: 10,
 142:       minlength:    6,
 143:       number: true,
 144:       equalTo: "#psw1"
 145:  
 146:     },
 147:     
 148:     psw1: {
 149:       required: true,
 150:        maxlength: 10,
 151:       minlength:    6,
 152:       number: true
 153:  
 154:     },
 155:     
 156:     acceso: {
 157:       required: true
 158:     },
 159:     
 160:     
 161:     status: {
 162:       required: true
 163:     }
 164:   }
 165: });
 166:  
 167:   });
 168:   </script>
 169:   
 170:   <style>
 171:       label{
 172:         width:150px;
 173:         display: inline-block;
 174:     }
 175:   </style>
 176:   
 177: </head>
 178: <body>
 179: <h1>
 180: <?php echo $_SESSION['nombre'];?>
 181:         </h1>
 182:         
 183:         <h3>Registrar nuevo cliente</h3>
 184:          <div id="container" align="center">
 185:   
 186:   
 187:   
 188:   <form id="registro" name="registro"  action="<?=base_url()?>index.php/ctrClientes/addClient" method="POST" enctype="multipart/form-data">
 189:     
 190:     
 191:     <b><label for="login">Nombres:</label></b>
 192:     <input type="text" name="NombreCliente" id="NombreCliente" onchange=""/> <br />
 193:     
 194:     
 195:     <b><label for="nom_usu">Apellidos:</label></b>
 196:     <input type="text" name="apellidos" id="apellidos"/><br />
 197:     
 198:     <b><label for="RFC">RFC:</label></b>
 199:     <input type="text" name="RFC" id="RFC" /><br />
 200:     
 201:     
 202:     <b><label for="psw1">Contraseña del Certificado</label></b>
 203:     <input type="text" name="ContraCer" id="ContraCer"/><br />
 204:     
 205:     
 206:     <b><label for="file">Certificado:</label></b>
 207:     <?php form_open_multipart('upload/do_upload'); ?>
 208:     <b><input type="file" name="cer" size="20000" /> </b>
 209:     <br /><br />
 210:     
 211:     
 212:     <b><label for="file">Archivo Llave:</label></b>
 213:     <?php form_open_multipart('upload/do_upload'); ?>
 214:     <b><input type="file" name="key" size="20000" /> </b>
 215:     <br /><br />
 216:     
 217:     
 218:  
 219:     <input type="submit" name="submit" value="Registrar"/><br />
 220:     
 221:     
 222:     
 223:     </form>
 224: </div>
 225: </div>
 226:  
 227:  
 228: </body>
 229: </html>
 230: </div>
 231:  
 232:  
 233:  
 234: </body>
 235:  
 236: <!--AQUI SE ACABA EL DIV DEL REGISTRO-->

Comentarios

Publicar un comentario

Entradas populares