0

Resulta que tengo esta función

function showData(){
var valores = [];
$(this).parents("tr").find("td").each(function() {
  valores.push($(this).text());
});
alert(valores);
}

que se supone muestra todos los valores de una fila seleccionada en una tabla, pero solo me muestra el alert sin nada de valores

la estructura de mi tabla, la traigo desde una archivo php y queda así:

<table>
 <tbody>
  <tr>
   <th></th>
  </tr>
  <tr>
  <td></td>
  </tr>
 </tbody>
</table>

sé que estoy haciendo algo mal al referenciar a la tabla y a los td, pero no sé que es, cualquier ayuda es bienvenida, muchas gracias.

SOLUCIONADO

tengo esta funcion en la cual recibo el this que viene desde el onclick del boton y lo ocupo antes de .parents().

function showData(show){
var valores = [];
$(show).parents("tr").find("td").each(function() {
  valores.push($(this).text());
});
if(valores == null || valores == ""){
  alert("valores vacios");
}else{
alert(valores);
}
}

y este es el boton que viene desde php

"<td><button class='btn btn-primary' onclick='showData(this)'> Click    me</button></td>";

y esto fue lo que me funcionó. muchas gracias a todos los que comentaron.

8
  • Alexi, en donde llamas a la funcion showData()? Creo que es importante que lo pongas, porque con el codigo que muestras no sabemos a que esta haciendo referencia $(this). Commented el 8 dic. 2017 a las 17:44
  • lo siento, eso estaba mal creo yo, este es mi codigo en php de ese boton "<td><button class='btn btn-primary' onclick='showData()'> Click me</button></td>"; Commented el 8 dic. 2017 a las 17:45
  • Recuerda que puedes editar tu pregunta y agregar todo lo necesario. Commented el 8 dic. 2017 a las 17:46
  • o tengo que enviar el $(this) al hacer click en el boton? y si es así, como lo recibo en la funcion y como ocupo esa variable? Commented el 8 dic. 2017 a las 17:47
  • No tienes que enviarlo. Pregunta, necesitas ver todas las columnas, o solo la que presionaste? Commented el 8 dic. 2017 a las 17:50

1 respuesta 1

0

Tal y como llamas a la función en el evento onclick this contiene una referencia al objeto window, no al botón.

Puedes pasarle el botón como parámetro con onclick="showData(this);":

function showData(button){
  var valores = [];
  $(button).parents("tr").find("td").each(function() {
    valores.push($(this).text());
  });
  console.log(valores);
}
th, td{
  font: Arial;
  padding: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <tbody>
  <tr>
   <th>Col1</th>
   <th>Col2</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Celda 1.2</td>
    <td><button class='btn btn-primary' onclick='showData(this);'> Click me</button></td>
  </tr>
  <tr>
    <td>2</td>
    <td>Celda 2.2</td>
    <td><button class='btn btn-primary' onclick='showData(this)'> Click me</button></td>
  </tr>
  <tr>
    <td>3</td>
    <td>Celda 3.2</td>
    <td><button class='btn btn-primary' onclick='showData(this)'> Click me</button></td>
  </tr>
 </tbody>
</table>

O, mejor, ya que utilizas jQuery, utilizarlo también para asociar los controladores de eventos:

function showData(button){
  var valores = [];
  $(this).parents("tr").find("td").each(function() {
    valores.push($(this).text());
  });
  console.log(valores);
}

$(function(){
  $('.btn').click(showData);
});
th, td{
  font: Arial;
  padding: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <tbody>
  <tr>
   <th>Col1</th>
   <th>Col2</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Celda 1.2</td>
    <td><button class='btn btn-primary'> Click me</button></td>
  </tr>
  <tr>
    <td>2</td>
    <td>Celda 2.2</td>
    <td><button class='btn btn-primary'> Click me</button></td>
  </tr>
  <tr>
    <td>3</td>
    <td>Celda 3.2</td>
    <td><button class='btn btn-primary'> Click me</button></td>
  </tr>
 </tbody>
</table>

1
  • gracias, eso fue lo que había hecho. :) Commented el 8 dic. 2017 a las 21:01

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.