0

El código JQuery a continuación recoje el valor contenido en la fila de una tabla, enviándolo después a un Servlet de java.

<script type="text/javascript">
        var value = "";

        $("#table tr").click(function() {
            $(this).addClass('selected').siblings().removeClass('selected');
            value = $(this).find('td:first').html();
            
            alert(value);
            location.href = "../controlador?var=" + value;
            
        });

        $('.ok').on('click', function(e) {
            
            alert($("#table tr.selecteds td:first").html());            
            
        });
</script>

Así recupero la información en el Servlet

String value = request.getParameter("var");

Lo que ahora necesito es poder hacer selección múltiple, manteniendo el mouse encima de una fila y con la tecla Control mantenerlo seleccionado en caso de elegir mas filas. El código debe obtener el valor de todas la filas y enviar los datos mediante un recorrido.

1 respuesta 1

1

Lo ideal es dividir el proceso en pequeñas tareas para conseguir lo que buscas, en este caso esas pequeñas tareas serian las siguientes:

1.- Conseguir el estado del botón ctrl

2.- Marcar/Desmarcar las tr para poder identificarlas posteriormente

3.- Rescatar las tr seleccionadas

4.- Procesar las selecciones (Guardarlas mediante un webservice por ajax o como tu gustes)

A continuación se realizan los 3 primeros pasos y te dejo la data lista para que la guardes donde prefieras, cuando adaptes el código procura agregar las clases correspondientes, me he tomado la libertad de agregar nuevas clases para facilitar las selecciones con jquery.

var ctrlPressed = false;
$(window).keydown(function(evt) {
  if (evt.which == 17) {
    ctrlPressed = true;
  }
}).keyup(function(evt) {
  if (evt.which == 17) {
    ctrlPressed = false;
  }
});

var selected_rows = []
$("table tr").click(function() {
  let clicked_row = $(this)
  if(!ctrlPressed){
    return null;
  }
  if(clicked_row.hasClass('selected')){
    clicked_row.removeClass('selected')
  }else{
    clicked_row.addClass('selected')
  }
});

$('#a-submit').click(function(){
  data = []
  selections = $('.selected')
  selections.each((index, element) => {
    let row_content = {
      firstname : $(element).find('.firstname').text(),
      lastname : $(element).find('.lastname').text(),
      age : $(element).find('.age').text(),
    } 
    data.push(row_content)
  })
  console.log("Your selections:" , data)
  // ACÁ ENVIAS LOS DATOS DE DATA POR AJAX O COMO GUSTES
})
table{
   background: lightgray;
}

.selected{
  background: red !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="firstname">Jill</td>
    <td class="lastname">Smith</td>
    <td class="age">50</td>
  </tr>
  <tr>
    <td class="firstname">Eve</td>
    <td class="lastname">Jackson</td>
    <td class="age">94</td>
  </tr>
</table>

<a href="#" id="a-submit">Enviar selecciones</a>

3
  • Esto también podría funcionar en una pantalla táctil? Es decir, si mantengo presionado con mi dedo la fila en cuestión, se seleccionará como si del ctrl se tratara?... También es posible que necesite utilizarlo en una tablet. Gracias de antemano. Commented el 5 jul. 2020 a las 3:02
  • 1
    No funcionará porque la selección está condicionada a la tecla ctrl, si quieres una solución genérica para diferentes dispositivos puedes tomar mi solución y eliminar lo relacionado con ctrlPressed, en ese caso se mantiene la lógica y la selección bastaría con hacer clic sobre una fila sin depender de la tecla ctrl y debería funcionar también en dispositivos móviles. Commented el 5 jul. 2020 a las 4:00
  • Genial. Te lo agradezco... Commented el 6 jul. 2020 a las 13:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.