1

Estoy intentando validar las celdas de una tabla html con jquery tengo una tabla que tiene un campo llamado estado y tengo unos botones que se deben bloquear según el estado que tenga la fila en la tabla. Hice un método que funciona , pero el problema que tiene es que siempre me valida el primer registro que está en al tabla, por lo tanto aunque seleccione otro registro, el sistema me va a indicar la validación correspondiente al primer registro que muestra al tabla y la idea que se valide por fila seleccionada.

Acá imagen de mi tabla.

introducir la descripción de la imagen aquí

Acá el código de jquery que utilizo No agregué el código de la tabla ya que es mucho y esta en un servlet.

<script>
    function cargarEstadoReservas() {

      if($("#resultado td:nth-child(8)").html()==="PENDIENTE")
       {
        $("#btnEnviarReserva").prop( "disabled", true );
        $("#btnGuardarReserva").prop( "disabled", false );
       }
     else
       {
          if($("#resultado td:nth-child(8)").html()==="POR CONFIRMAR")
           {
              $("#btnEnviarReserva").prop( "disabled", false );
              $("#btnGuardarReserva").prop( "disabled", false );
           }
         else
           {
              if($("#resultado td:nth-child(8)").html()==="CONFIRMADA")
              {
                 $("#btnEnviarReserva").prop( "disabled", true );
                 $("#btnGuardarReserva").prop( "disabled", true );
              }
            else
              {
                 if($("#resultado td:nth-child(8)").html()==="CANCELADA")
                  {
                    $("#btnEnviarReserva").prop( "disabled", true );
                    $("#btnGuardarReserva").prop( "disabled", true );
                  }
              }
          }
       }
    }

Si se fijan en al validación , este método bloquea los botones de un modal de acuerdo al estado de un registro de una tabla y cada vez que selecciono un registro de la tabla si el estado es PENDIENTE , se bloquea uno de 2 botones si el estado es POR CONFIRMAR ,se bloquea uno de 2 botones Si el estado es CONFIRMARA ,se bloquea ambos botones Si el estado es CANCELADA ,se bloquea ambos botones

Pero sólo me valida la primera fila , es decir bloquea sólo un botón , aunque yo seleccione otro registro con otro estado.Por lo tanto sólo me bloquea los botones en el modal de acuerdo al primer registro. Quisiera saber que le falta a la función para que recorra toda la tabla y así muestre de acuerdo al registro seleccionado ?.

introducir la descripción de la imagen aquí

2 respuestas 2

0

El problema es que siempre buscas el octavo td en toda la tabla. Por eso siempre te va a dar el mismo resultado. Necesitas pasar el boton que fue presionado a la funcion para usar el contexto correcto. Algo asi:

function cargarEstadoReservas(boton) {
  var tr = $(boton).parent('tr');

  if(tr.find("td:nth-child(8)").html()==="PENDIENTE")
   {
    $("#btnEnviarReserva").prop( "disabled", true );
    $("#btnGuardarReserva").prop( "disabled", false );
   }
 else
   {
      if(tr.find("td:nth-child(8)").html()==="POR CONFIRMAR")
       {
          $("#btnEnviarReserva").prop( "disabled", false );
          $("#btnGuardarReserva").prop( "disabled", false );
       }
     else
       {
          if(tr.find("td:nth-child(8)").html()==="CONFIRMADA")
          {
             $("#btnEnviarReserva").prop( "disabled", true );
             $("#btnGuardarReserva").prop( "disabled", true );
          }
        else
          {
             if(tr.find("td:nth-child(8)").html()==="CANCELADA")
              {
                $("#btnEnviarReserva").prop( "disabled", true );
                $("#btnGuardarReserva").prop( "disabled", true );
              }
          }
      }
   }
}
2
  • hola, no me funcionó, sera porque en el botón de la tabla que abre el modal no le pase el parámetro botón? así tengo la llamada al método desde el botón onclick="cargarEstadoReservas()" el 9 sep. 2019 a las 23:55
  • tienes que cambiarlo a esto: onclick="cargarEstadoReservas(this)"
    – alanfcm
    el 9 sep. 2019 a las 23:57
0

Debes cargar el modal con javascript usando el atributo onclick para llamar la funcion que permitirá 'settear' o cambiar el comportamiento de los botones según cada fila seleccionada, para eso lee la documentación de modal bootstrap.

Agrego un ejemplo.

function editar(element){
  $('#editarModal').modal('show')
  
  // busco el padre de element.
  let eltr = $(element).parent().parent();
  // busco el estado (un td la clases reserva_estado)
  let eltd = $(eltr).find('.reserva_estado')[0]
  // busco el valor del estado.
  let elestado = $(eltd).attr('data-estado')  
  
  // cambiar el estado del botton
  if(elestado === 'editar'){
    $('#editar').removeAttr('disabled')
  }else{
    $('#editar').attr('disabled','disabled')
  }
  
}
<head>
<!-- AGREGO LA  LIBRERIA BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<head>


<body>
<!-- LA TABLA -->
<table class="table">
  <thead>
    <th>ESTADO</th>
    <th>ACCION</th>
  </thead>
  <tbody>
    <tr class="reserva">
      <td class="reserva_estado" data-estado="editar">EDITAR</td>
      <td class="reserva_accion">
        <!-- BOTON METODO ONCLICK -->
        <a onclick="editar(this)" class="btn btn-primary">Editar</a>       </td>
    </tr>
    <tr class="reserva">
      <td class="reserva_estado" data-estado="noeditar">NO EDITAR</td>
      <td class="reserva_accion">
        <!-- BOTON METODO ONCLICK -->
        <a onclick="editar(this)" class="btn btn-primary">Editar</a>       </td>
    </tr>
  </tbody>
</table>

<!-- EL MODAL-->
<!-- Modal -->
<div class="modal fade" id="editarModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
        <button type="button" id="editar" disabled>Editar</button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<body>

1
  • hola buenas intenté usando tu ejemplo pero no me funcionó, será porque tengo la tabla con los datos dentro de un servlet? el 10 sep. 2019 a las 15:16

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.