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-->