Empty values when bringing them from a jquery table

Question

Empty values when bringing them from a jquery table

Navigation

#1 by (0 votes)

0

It turns out that I have this function

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

which is supposed to show all the values of a selected row in a table, but it only shows me the alert without any values

the structure of my table, I bring it from a php file and it looks like this:

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

I know I'm doing something wrong by referring to the table and the td, but I do not know what it is, any help is welcome, thank you very much.

SOLVED

I have this function in which I receive the this that comes from the onclick of the button and I occupy it before .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);
}
}

and this is the button that comes from php

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

and this was what worked for me. Thank you very much to everyone who commented.

jquery html

asked by alexi gallegos 08.12.2017 в 18:30

source

1 answer

Loop to perform updates on several DBs at the same time? Obtain information from a node in firebase

score 0 · Accepted Answer

As you call the function in the event onclick this contains a reference to the object window , not the button.

You can pass the button as a parameter with 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>

Or, better, since you use jQuery, use it also to associate the event handlers:

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>