Tema: Seleccionar todos los checkbox y dar color al tr
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/01/2015, 13:26
Avatar de Carlos1975
Carlos1975
 
Fecha de Ingreso: mayo-2005
Mensajes: 29
Antigüedad: 19 años
Puntos: 0
Seleccionar todos los checkbox y dar color al tr
Hola a todos, de nuevo por estos foros, si es que no podemos pensar que nunca sabemos demasiado

Mi problema es que quiero conseguir que al poner la opcion de seleccionar todos... se coloreen todos los tr que incluyen el checkbox seleccionado.

Dejo el codigo de mi script para ver si me podeis ayudar, busco la compatibilidad con todos los navegadores por lo menos con los principales. (IE, moz, crome)


ARCHIVO productos.php

<body> ......

Código PHP: 
Ver original
  1. <?php 
  2.  
  3. $productos = mysql_query("SELECT * FROM tblproducts ORDER BY IdProducto ASC");
  4. $totalRows = mysql_num_rows($productos);
  5.  
  6. ?>

Código HTML: 
Ver original
  1. <form name="select_form" id="select_form" method="POST" action="productos_delete.php">
  2.  
  3. <table cellpadding="0" cellspacing="0" border="0" class="display" id="productos">
  4.     <thead>
  5.         <tr>
  6.             <td width="5%" rowspan="2">&nbsp;</td>
  7.             <td width="10%" rowspan="2">Imagen</td>
  8.     </tr>
  9.     <tr>
  10.             <th width="5%">ID</th>
  11.             <th width="10%">Referencia</th>
  12.             <th width="25%">Nombre Producto</th>
  13.             <th width="10%">Precio</th>
  14.             <th width="10%">Tipo IVA</th>
  15.             <th width="10%">Cantidad</th>
  16.             <td width="5%">Visible</td>
  17.             <td width="10%">&nbsp;</td>
  18.             <td width="10%">&nbsp;</td>
  19.     </tr>
  20. </thead>
  21. <tbody>

Código PHP: 
Ver original
  1. <?php 
  2.  
  3. // codigo introducido en el tr que quiero que se seleccione y se coloree
  4.      
  5. while($reg = mysql_fetch_array($productos)) {
  6.     
  7. echo '<tr class="selected" onclick="check_selected(this)" id="tr_selected">';
  8. echo '<td align="center"><input type="checkbox" name="check[]" id="check" value="'.$reg['idProducto'].'" /></td>';
  9. echo '<td align="center">'; 
  10. echo MostrarImagenProducto($reg['idProducto']).'</td>';
  11. echo '<td align="center">'.$reg['idProducto'].'</td>';
  12. echo '<td align="center">'.$reg['strReferenciaProducto'].'</td>';
  13. echo '<td align="left">'.$reg['strNombreProducto'].'</td>';
  14. echo '<td align="center">'.$reg['dblPrecioProducto'].' €</td>';
  15. echo '<td align="center">'.TextoTipoIVA($reg['intTipoIVA']).'</td>';
  16. echo '<td align="center">'.$reg['intStock'].'</td>';
  17. echo '<td align="center">'.ObtenerImagenEstado($reg['intEstadoProducto']).'</td>';
  18. echo '<td align="center"><a class="edit" href="productos_edit.php?product='.$reg['idProducto'].'"></a></td>';
  19. echo '<td align="center">'; 
  20. echo '<select OnChange="if(this.options[1].selected) { DuplicateElement('.$reg['idProducto'].'); } 
  21.                        if(this.options[2].selected) { DeleteElement('.$reg['idProducto'].'); }" >';
  22. echo '<option></option>';
  23. echo '<option>Duplicar</option>';
  24. echo '<option>Eliminar</option>';
  25. echo '</select>';
  26. echo '</td></tr>';
  27.                      
  28. }
  29.  
  30. ?>

Código HTML: 
Ver original
  1. </tbody>
  2. <tfoot>
  3.         <tr>
  4.             <th colspan="4" class="sel_check">
  5. <select OnChange="if(this.options[1].selected) { SelectElements(); }
  6.                  if(this.options[2].selected) { DeselectElements(); }
  7.                                  if(this.options[3].selected) { DeleteElementsSelected(); }" id="select_id">
  8. <option value="0" class="title">Acciones masivas</option>
  9. <option value="1" class="img_sel">Seleccionar todos</option>
  10. <option value="2" class="img_des">Deseleccionar todos</option>
  11. <option value="3" class="img_del">Eliminar productos</option>
  12.                 </select>
  13.             </th>
  14.             <th colspan="7"></th>
  15.         </tr>
  16.     </tfoot>
  17.  
  18. </table>
  19.  
  20. </form>
  21.   
  22. </body>
  23. </html>


Y las funciones javascript son las siguientes:
Todas funcionan corectamente pero no consigo darle color al tr donde esta el checkbox seleccionado.

ARCHIVO global_functions.js

Código Javascript: 
Ver original
  1. function check_selected(i) {
  2.     ch = i.getElementsByTagName("input")[0];
  3.     ch.checked =! ch.checked;
  4.     if (ch.checked) {
  5.         i.style.backgroundColor = "#ffc";
  6.     } else {
  7.         i.style.backgroundColor = "#fff";
  8.     }
  9. }
  10.  
  11. //------------------------------------------------------------------
  12. //--------------------------------------------------- select options 
  13.  
  14. function SelectElements() {
  15.     for (i = 0; i < document.select_form.elements.length; i++)
  16.     if (document.select_form.elements[i].type == "checkbox") {
  17.         document.select_form.elements[i].checked = true;
  18.         document.select_form.select_id.value = 0;
  19.     }
  20. }
  21.  
  22. function DeselectElements() {
  23.     for (i = 0; i < document.select_form.elements.length; i++)
  24.     if (document.select_form.elements[i].type == "checkbox")        
  25.         document.select_form.elements[i].checked = false;
  26.         document.select_form.select_id.value = 0;
  27. }
  28.  
  29. function DeleteElementsSelected() {
  30.     var option = document.getElementById("select_form").check; 
  31.     var cont = 0; 
  32.     for (var x = 0; x < option.length; x++) {
  33.         if (option[x].checked) {
  34.         cont = cont + 1;
  35.         }
  36.     }
  37.     if (cont == 0) {
  38.         alert("No ha seleccionado ningun elemento")
  39.         location.reload();
  40.     } else {
  41.         message = confirm("Seguro que desea eliminar los elementos seleccionados?")
  42.         if (message != 0) {
  43.             document.all["select_form"].submit();
  44.         } else {
  45.             document.select_form.select_id.value = 0;
  46.             return;
  47.         }
  48.     }
  49. }
  50.  
  51. function DuplicateElement(i) {
  52.     message = confirm("Se duplicara todo el contenido de esta seleccion")
  53.     if (message != 0) {
  54.         window.location = "../admin/productos_duplicate.php?producto="+i+"";
  55.     } else {
  56.         location.reload();
  57.     }
  58. }
  59.  
  60. function DeleteElement(i) {
  61.     message = confirm("Seguro que desea eliminar el elemento seleccionado?")
  62.     if (message != 0) {
  63.         window.location = "../admin/productos_delete.php?producto="+i+"";
  64.     } else {
  65.         location.reload();
  66.     }
  67. }

Seguro que es algo sencillisimo pero se me escapa.

Gracias : porra:
Última edición por Carlos1975; 12/01/2015 a las 13:44