get the row number in a table with jquery

Question

I have a table added dynamically to my page.

$("#myTable").on("click", "tr .eliminar.tooltip", function() {
  var myCol = $("#myTable").index(); //ok
  var $tr = $("#myTable").closest('tr'); // ok
  var myRow = $tr.index(); // wrong value
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="uk-table" id="myTable">

  <tbody>
    <tr data-myData="001">
      <td>
        <a class="editar tooltip">
          <img src="Editar.png">
        </a>
        <a class="eliminar tooltip">
          <img src="Eliminar.png">
        </a>
      </td>
    </tr>
    <tr data-myData="002">
      <td>
        <a class="editar tooltip">
          <img src="Editar.png">
        </a>
        <a class="eliminar tooltip">
          <img src="Eliminar.png">
        </a>
      </td>
    </tr>
  </tbody>
</table>

How can I get the info? when clicking, I want to get the row number to get the data.attr("myData").

Thats the jquery code:

"I want to get the row number to get the data" - so you don't need the row number at all? Just the data? meta.stackexchange.com/a/66378 — fdomn-m
– fdomn-m, Commented Nov 7, 2016 at 10:34

Satpal · Accepted Answer · 2016-11-07 10:17:08Z

You need to use this i.e. current element context to get the tr element and .index(element)

$("#myTable").on("click", "tr .eliminar.tooltip", function() {
    var $tr = $(this).closest('tr');
    var myRow = $("#myTable tr").index($tr);
    var myData = $tr.attr('data-myData')
    console.log(myRow, myData);
});

jQuery(function($) {
  $("#myTable").on("click", "tr .eliminar.tooltip", function() {
    var $tr = $(this).closest('tr');
    var myRow = $("#myTable tr").index($tr);
    var myData = $tr.attr('data-myData')
    console.log(myRow, myData);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="uk-table" id="myTable">

  <tbody>
    <tr data-myData="001">
      <td>
        <a class="editar tooltip">
          <img src="Editar.png">
        </a>
        <a class="eliminar tooltip">
          <img src="Eliminar.png">
        </a>
      </td>
    </tr>
    <tr data-myData="002">
      <td>
        <a class="editar tooltip">
          <img src="Editar.png">
        </a>
        <a class="eliminar tooltip">
          <img src="Eliminar.png">
        </a>
      </td>
    </tr>
  </tbody>
</table>

Mayank Pandeyz · Accepted Answer · 2016-11-07 10:01:27Z

4

Try this:

Get COLUMN INDEX on click:

$(this).closest("td").index();

Get ROW INDEX on click:

$(this).closest("tr").index();

answered Nov 7, 2016 at 10:01

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

Comments

sshhDaniella · Accepted Answer · 2016-11-07 10:15:41Z

1

You should be able to target each tr using the .closest() function based on the td clicked. And using the .attr() function to get the value of "data-myData"

var tr = $(this).closest('tr');
var data = tr.attr("data-myData");

I have made a fiddle as an example.

https://jsfiddle.net/gpo0htp5/

answered Nov 7, 2016 at 10:15

sshhDaniella

995 bronze badges

1 Comment

fdomn-m Over a year ago

To make it clear where to put this code, add the click handler. Also, you can use .data("myData").

Collectives™ on Stack Overflow

get the row number in a table with jquery

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related