How to know index of a inside a with jQuery?

Asked Dec 07 '09 at 06:19

Active Feb 23 '23 at 11:54

Viewed 4.6k times

15

I'm now implementing something like this post (specifically, the effect takes place when the row is clicked)

How do I know what the index of the row is inside the table?

jquery html

edited May 23 '17 at 10:29
Community

1

1

asked Dec 07 '09 at 06:19
user198729

61,774

108

250

348

4 Answers4

29

If you defined the click handler directly on the `tr` elements, you can use the `index` method like this:

`$('#tableId tr').click(function () { var rowIndex = $('#tableId tr').index(this); //index relative to the #tableId rows });`

If the click event is bound not directly on the `tr` element (if you are using an anchor, a button, etc...), you should find the closest `tr` to get the right index:

`$(selector).click(function () { var rowIndex = $('#tableId tr').index($(this).closest('tr')); return false; });`

Try an example here.

answered Dec 07 '09 at 06:30
Christian C. Salvadó

807,428

183

922

838

This won't work right if the page has multiple tables. Probably best to look for sibling `
` elements. – TM.Dec 07 '09 at 06:32

Shouldn't the selector of the $.index() call be restricted to the parent table of whatever TR was clicked, rather than a generic table tag? – Sampson Dec 07 '09 at 06:33

@TM, @Jonathan: was a typo, restricted to a `#tableId` element – Christian C. Salvadó Dec 07 '09 at 06:36

1

This should work:

`$('#tableId tr').click(function () { var index = $(this).siblings('tr').index(this); });`

You don't need `tr` in the call to `siblings` if you are sure your html will be well-formed.

answered Dec 07 '09 at 06:34
TM.

108,298

33

122

127

1

To answer your first question:

`$("#id tr").click(function() { alert($("#id tr").index(this)); });`

If you just do:

`$("table tr").index(this);`

and you have multiple tables on the page, you will get an erroneous result.

That being said, you don't need to know the index to move rows up and down in a table. For example:

`<table id="foo"> <tr> <td><a href="#" class="up">Up</a> <a href="#" class="down">down</a></td> <td>First row</td> </tr> <tr> <td><a href="#" class="up">Up</a> <a href="#" class="down">down</a></td> <td>Second row</td> </tr> <tr> <td><a href="#" class="up">Up</a> <a href="#" class="down">down</a></td> <td>Third row</td> </tr> </table>`

with something like:

`$("a.up").click(function() { var row = $(this).closest("tr"); if (row.prev().length > 0) { row.insertBefore(row.prev()); } return false; }); $("a.down").click(function() { var row = $(this).closest("tr"); if (row.next().length > 0) { row.insertAfter(row.next()); } return false; });`

edited Dec 07 '09 at 06:52

cletus

answered Dec 07 '09 at 06:35
cletus

616,129

168

910

942

0

How about `HTMLTableRowElement.rowIndex`?

The `HTMLTableRowElement.rowIndex` read-only property represents the position of a row in relation to the whole `<table>`.

Beware that if you have `thead`, `tbody` or `tfoot` tags wrapping the rows, these will be counted as well.

`$("table tr").click(function () { console.log(this.rowIndex); });`

edited Feb 23 '23 at 11:54

sn3p

answered Feb 23 '23 at 08:55
sn3p

726

4

13

Linked

-1
Chrome showing uncaught TypeError: Cannot read property 'cells' of undefined at HTMLButtonElement.<anonymous>

0
How to move an <option> up down in a <select>?

Question

I'm now implementing something like this post (specifically, the effect takes place when the row is clicked)

How do I know what the index of the row is inside the table?

score 29 · Accepted Answer · answered Dec 07 '09 at 06:30

If you defined the click handler directly on the tr elements, you can use the index method like this:

$('#tableId tr').click(function () {
  var rowIndex = $('#tableId tr').index(this); //index relative to the #tableId rows
});

If the click event is bound not directly on the tr element (if you are using an anchor, a button, etc...), you should find the closest tr to get the right index:

$(selector).click(function () {
  var rowIndex = $('#tableId tr').index($(this).closest('tr'));

  return false;
});

Try an example here.

This won't work right if the page has multiple tables. Probably best to look for sibling `

score 1 · Answer 2 · answered Dec 07 '09 at 06:34

1

This should work:

$('#tableId tr').click(function () {
    var index = $(this).siblings('tr').index(this);
});

You don't need tr in the call to siblings if you are sure your html will be well-formed.

answered Dec 07 '09 at 06:34

TM.

108,298
33
122
127

cletus · Answer 3 · 2009-12-07T06:52:47.327

To answer your first question:

$("#id tr").click(function() {
  alert($("#id tr").index(this));
});

If you just do:

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

and you have multiple tables on the page, you will get an erroneous result.

That being said, you don't need to know the index to move rows up and down in a table. For example:

<table id="foo">
<tr>
  <td><a href="#" class="up">Up</a> <a href="#" class="down">down</a></td>
  <td>First row</td>
</tr>
<tr>
  <td><a href="#" class="up">Up</a> <a href="#" class="down">down</a></td>
  <td>Second row</td>
</tr>
<tr>
  <td><a href="#" class="up">Up</a> <a href="#" class="down">down</a></td>
  <td>Third row</td>
</tr>
</table>

with something like:

$("a.up").click(function() {
  var row = $(this).closest("tr");
  if (row.prev().length > 0) {
    row.insertBefore(row.prev());
  }
  return false;
});
$("a.down").click(function() {
  var row = $(this).closest("tr");
  if (row.next().length > 0) {
    row.insertAfter(row.next());
  }
  return false;
});

sn3p · Answer 4 · 2023-02-23T11:54:26.357

0

How about HTMLTableRowElement.rowIndex?

The HTMLTableRowElement.rowIndex read-only property represents the position of a row in relation to the whole <table>.

Beware that if you have thead, tbody or tfoot tags wrapping the rows, these will be counted as well.

$("table tr").click(function () {
  console.log(this.rowIndex);
});

edited Feb 23 '23 at 11:54

answered Feb 23 '23 at 08:55

sn3p

726
4
13