How to know index of a inside a with jQuery?

Asked Dec 07 '09 at 06:19

Active Jan 13 '12 at 15:01

Viewed 4.3k times

14

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

58,910

106

245

345

3 Answers3

27

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ó

769,263

179

909

832

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.

102,836

30

121

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

599,013

161

897

938

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 27 · 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.

102,836
30
121
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;
});