seleccionar filas con la tecla SHIFT + tecla hacia abajo

lodoman · #1 (**permalink**) 19/01/2011, 09:25

hola a todos estoy trabajando en un ejemplo echo con jquery en el cual seleccionas filas(en realidad no la seleccionas solo se le cambia el "color") de una tabla(tablaBBDD) al hacer clic sobre ellas y al darle a un boton las pasa a otra tabla(guardarRegistros) hasta ahi todo va bien, el problema es que quiero simular el evento de windows que cuando precionas SHIFT + la tecla hacia abajo va seleccionando varias filas hasta que el usuario suelta las teclas, esto es por que cuando mi tabla trae 500 registros o mas tedioso ir haciendo clic en cada fila.

Como no he podido simular este efecto trate de hacer otro donde al mantener precionado el boton de el mouse y moverlo hacia abajo seleccionara las filas(cambiara el color) hasta que el usuario suelte el boton cosa que tampoco he podido terminar si me pudieran ayudar se los agradeceria mucho

este es el codigo, si cambia de color las filas pero tengo que pasar el puntero siempre por la primera fila coloreada

gracias

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style>
    <!--
       .fila{
       
       }
       .seleccionado{
          background: rgb(255,134,0);
       }
    //-->
    </style>
    <script src="jquery-1.3.2.min.js"></script>
    <script>
      $(function(){          
          $("table.tablaBBDD tr").each(function(){
            
            $(this).mousedown(function(){
                $nextTR = $(this).next('tr');
                $nextTR.hover(function(){   
                $nextTR.removeClass('fila');
                $nextTR.addClass('seleccionado');
                $nextTR = $nextTR.next('tr');
                })
            })
          });
           $("table.guardarRegistros tr").each(function(){
            $(this).click(function(){
              if($(this).attr("class") == 'fila'){
                $(this).removeClass('fila');
                $(this).addClass('seleccionado');   
              }else{
                $(this).removeClass('seleccionado');
                $(this).addClass('fila');
              }   
            })
          });
         $("#pasar").click(function(){
            $("table.tablaBBDD tr").each(function(){
               if($(this).attr("class") == 'seleccionado'){
                  $("#guardarRegistros").append($(this));
                  $(this).removeClass('seleccionado');
               } 
            })
         }) 
          $("#regresar").click(function(){
            $("table.guardarRegistros tr").each(function(){
               if($(this).attr("class") == 'seleccionado'){
                  $("#tablaBBDD").append($(this));
                  $(this).removeClass('seleccionado');
               } 
            })
         }) 
                       
      })
    </script>
        
  </head>
 
  <body>
  <table>
  <tr>
  <td>
    <!-- TABLA QUE PROVIENE DE LA BASE  DE DATOS -->
    <table width="500" class="tablaBBDD" id="tablaBBDD">
     <tr class="fila">
      <td> Registro 1</td>
      <td> Registro 1</td>
      <td> Registro 1</td>
      <td> Registro 1</td>
      <td> Registro 1</td>
     </tr>
     
     <tr class="fila">
      <td> Registro 2</td>
      <td> Registro 2</td>
      <td> Registro 2</td>
      <td> Registro 2</td>
      <td> Registro 2</td>
     </tr>
     
     <tr class="fila">
      <td> Registro 3</td>
      <td> Registro 3</td>
      <td> Registro 3</td>
      <td> Registro 3</td>
      <td> Registro 3</td>
     </tr>
     
     <tr class="fila">
      <td> Registro 4</td>
      <td> Registro 4</td>
      <td> Registro 4</td>
      <td> Registro 4</td>
      <td> Registro 4</td>
     </tr>
    </table>
    </td>
    <td>
    <!-- TABLA A LLENAR -->
    
    <input type="button" id="pasar" value="Pasar Datos">
    <input type="button" id="regresar" value="Regresar Datos">
    </td>
    <td>
    <table class="guardarRegistros" id="guardarRegistros">
      <tr class="fila">
      <td> Registro 5</td>
      <td> Registro 5</td>
      <td> Registro 5</td>
      <td> Registro 5</td>
      <td> Registro 5</td>
      </tr>
     
    </table>
     </td>
     </tr>
     </table>
  </body>
 
</html>