0

Tengo el siguiente método donde obtengo un campo texto de la tabla.

function save(){
    $('#tableDespacho tr').on('click', function(){
        //var first = $(this).find('td:first').html();
        var area = $(this).find('td:eq(0)').text();
        var fecha = $(this).find('td:eq(1)').text();
        var cantidad = $(this).find('td:eq(5)').text();
        console.log(cantidad);
    });
}

A este método lo llamo con un botón:

<button type="button" onclick="save()" class="btn btn-sm btn-success done" data-toggle="tooltip" data-placement="top" title="Recepcionar Item" data-original-title="Remove item"> 
    <i class='fa fa-check fa-lg '></i>
</button>

Aparte tengo un boton para editar la cantidad de la tabla.

$('#tableDespacho').editable({
    container: 'body',
    selector: 'td.Cantidad',
    title: 'Cantidad',

    validate: function(value) {
        if ($.trim(value) == '') {
            return 'Este campo es necesario';
        }
        var regex = /^[0-9]+$/;
        if(! regex.test(value)) {
            return 'Solo Numeros!';
        }
        //if ($(this).text() >= value) {
        //    return ' Excede cantidad';
        //}
    }
});

Al principio funciona bien puedo editar las cantidades y al presionar el boton me muestra la cantidad. Pero después editar y mostrar la cantidad si presiono la tabla me llama a la funcion save.

A que se debe esto?

tabla

<table id="tableDespacho" class="table table-striped table-bordered" cellspacing="0" width="100%">
  <thead>
     <tr>
      <th class="th-sm">CodPieza</th>
      <th class="th-sm">Cantidad</tr>
  </thead>
<tbody>
  <?php include_once('include/conexion.php');
   $sql = "SELECT * FROM Despacho_DetalleEntreAreas ORDER BY Fecha DESC";
   $result = mysqli_query($conexion,$sql);
       if ($result) {
      $resultCheck = mysqli_num_rows($result);
          if ($resultCheck >0) {
          while ($row = mysqli_fetch_assoc($result)) { ?>
           <tr>
              <td>
               <?php echo $row['Desc_Area'] ?>
             </td>
             <td data-name="Cantidad" class="Cantidad <?php echo $text ?>" data-type="text">
               <?php echo $row['Cantidad'] ?>
             </td>

               <td>
               <button type="button" onclick="save()" id="btn" class="btn btn-sm btn-success done" data-toggle="tooltip" data-placement="top" title="Recepcionar Item" data-original-title="Remove item"> <i class='fa fa-check fa-lg mb-1 white-text'></i></button>
              </td>
               </tr>
            <?php } } } ?>
           </tbody> 
     </table>

introducir la descripción de la imagen aquí

1
  • Porque agregas el Listener click adentro de una función que se ejecuta con un onclick? el 13 sep. 2018 a las 15:36

2 respuestas 2

1

Es porque en la funcion save() generas un Listener. Ahora, ¿Qué es un listener?. Pues básicamente es una función que se ejecuta cada vez que cierto evento sucede, el evento que asociaste a ese listener fue click y se lo asociaste al selector '#tableDespacho tr'.

Dicho de otra forma, cada vez que haces un click en un elemento tr que es hijo del elemento con id #tableDespacho se ejecuta el código asociado, el cual es el siguiente:

// esta es la funcion que tu hiciste
function(){
    //var first = $(this).find('td:first').html();
    var area = $(this).find('td:eq(0)').text();
    var fecha = $(this).find('td:eq(1)').text();
    var cantidad = $(this).find('td:eq(5)').text();
    console.log(cantidad);
}

yo te propongo el siguiente cambio a tu código

function save(btn){
    var area = $(btn).closest('tr').find('td:eq(0)').text();
    var fecha = $(btn).closest('tr').find('td:eq(1)').text();
    var cantidad = $(btn).closest('tr').find('td:eq(2)').text();
    console.log(cantidad);
}
td {
  border:1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
  <th>Área</th>
  <th>Fecha</th>
  <th>Cantidad</th>
  <th></th>
</tr>
<tr>
  <td>area1</td>
  <td>fecha1</td>
  <td>5</td>
  <td><button onclick="save(this)">Mostrar cantidad</button></td>
</tr>
<tr>
  <td>area2</td>
  <td>fecha2</td>
  <td>15</td>
  <td><button onclick="save(this)">Mostrar cantidad</button></td>
</tr>
<tr>
  <td>area3</td>
  <td>fecha3</td>
  <td>25</td>
  <td><button onclick="save(this)">Mostrar cantidad</button></td>
</tr>
</table>

17
  • Me selecciona la cantidad de la primera fila, puede ser por first-child?
    – MoteCL
    el 13 sep. 2018 a las 15:55
  • exactamente, por casualidad ese boton está dentro de la tabla dentro una fila y es esa la que esperas obtener? si es así puedes usar $(this).parent().find('td:eq(5)').text()
    – LPZadkiel
    el 13 sep. 2018 a las 15:57
  • cambie $('#tableDespacho tr:first-child').find('td:eq(5)').text(); por $(this).parent().find('td:eq(5)').text() y no funciona :(
    – MoteCL
    el 13 sep. 2018 a las 16:08
  • 1
    edite la respuesta agregando un snippet, ojo con los cambios porque ahora a la funcion save le mando como parametro this
    – LPZadkiel
    el 13 sep. 2018 a las 16:41
  • 1
    de nada, como consejo la próxima vez intenta agregar un snippet (o jsfiddle o codepen o algo así) que simule tu problema de forma que sea mas fácil poder ayudarte
    – LPZadkiel
    el 13 sep. 2018 a las 16:46
1

Es obvio, estás creando el mismo evento en el botón y en el <tr> de la tabla.

Es decir, cuando le das al botón, estas creando una función que hace lo mismo pero para tu <tr> por eso si le picas por primera vez a la tabla no hará nada, pero si le das al botón y luego a la tabla ya creaste el evento. Lo puedes solucionar así. Primero debes ponerle un id al botón, por ejemplo id="btn"

$(document).on( 'click', '#btn', function(e){
  //Esto para detener el handler nativo del botón y evitar que se propague la función a nodos más bajos
  e.preventDefault(); e.stopPropagation();
  //Primero buscamos la tabla y sus '<tr>'
  var tabla = $('#tableDespacho tr');
  //Despues empezamos a sacar la información justo como lo hiciste
  var first = tabla.find('td:first').html(),
      area = tabla.find('td:eq(0)').text(),
      fecha = tabla.find('td:eq(1)').text(),
      cantidad = tabla.find('td:eq(5)').text();
      console.log(cantidad);
    });
});

No tengo un ambiente de testing, pero espero que te funcione.

Saludos

3
  • Me selecciona la fila entera, yo quiero solo la cantidad de esa fila. Puede ser por el campo id
    – MoteCL
    el 13 sep. 2018 a las 15:58
  • Pon la estructura de tu tabla el 13 sep. 2018 a las 16:00
  • Listo quiero obtener la cantidad de la linea, no la fila entera de cantidades.
    – MoteCL
    el 13 sep. 2018 a las 16:30

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.