Pick table value with jQuery

Asked

Viewed 2,915 times

0

I would like to take the value of one column of the table, but in a way that I could reuse the function to take values from other tables.

I tried it this way, but it does not present me anything on the console.

OBS: The value for line only.

HTML

<table class="table">
    <thead></thead>
    <tbody class="table-hover">
        <tr>
          <td id="id">2</td><td>Cliente N - 1</td>
          <td>teste</td>
          <td>2017-02-14 22:00:52</td>
          <td class="txt-center pointer"><span class="glyphicon glyphicon-ok txt-error pointer" onclick="updateStatus()"></span></td>
        </tr>
        <tr>
          <td id="id">3</td>
          <td>Cliente N - 2</td>
          <td>teste</td>
          <td>2017-02-14 22:00:52</td>
          <td class="txt-center pointer"><span class="glyphicon glyphicon-ok txt-error pointer" onclick="updateStatus()"></span></td>
        </tr>
    </tbody>
  <tfoot></tfoot>

jQuery

function updateStatus(param){ //param seria o numero da coluna
  var teste  = $('table > tbody').closest('tr').find('td').eq(param).text();
  console.log(teste);
}

then through the param I would indicate the column to be picked up the value...

javascript jquery html

  • You need a specific line or all of them?

  • Sorry, I will complete the question.

  • "The line" would only be the first or second line?

  • In case I would click on span where this the function and then in that row it would pick up the value of the column, the column would be passed through the param, for example in column 3 where the date is param would indicate the column where this column q contains date.

  • I’m sorry, I didn’t see that there was a call from function on span.

  • Maybe what you need is in the answer to that other question : question

Show 1 more comment

1 answer

2


First, add a parameter to the function that references the span where you are calling the function. I called the parameter of obj. In the call, add the value this for this parameter. In the second parameter, param, pass the number of the column you want to search for. In the example below, I used 1, then you will find the values of the first column, 2 and 3, depending on the line.

To access the value by jQuery, we seek to tag tr in which the span is found:

$(obj).parents("tr")

Then we search the nth tag td daughter, in which the value of n is defined by the value of param:

$(obj).parents("tr").find("td:nth-child(" + param + ")");

With this, we can call the function html to get the column value:

console.log(column.html());

See below working:

function updateStatus(obj, param) {
  var column = $(obj).parents("tr").find("td:nth-child(" + param + ")");
  console.log(column.html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table" border="1">
  <thead></thead>
  <tbody class="table-hover">
    <tr>
      <td id="id">2</td>
      <td>Cliente N - 1</td>
      <td>teste</td>
      <td>2017-02-14 22:00:52</td>
      <td class="txt-center pointer">
        <span class="glyphicon glyphicon-ok txt-error pointer" onclick="updateStatus(this, 1)">
          Icon
        </span>
      </td>
    </tr>
    <tr>
      <td id="id">3</td>
      <td>Cliente N - 2</td>
      <td>teste</td>
      <td>2017-02-14 22:00:52</td>
      <td class="txt-center pointer">
        <span class="glyphicon glyphicon-ok txt-error pointer" onclick="updateStatus(this, 1)">
          Icon
        </span>
      </td>
    </tr>
  </tbody>
  <tfoot></tfoot>
</table>

  • good beyond the code you explained, I will study your code and implement it in my project, mt thank you

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.