Question

Afternoon,

say I have a table like so

<table id="foo">
  <tr><td><!-- label --><!-- textbox --></td><tr>
  <tr><td><!-- label --><!-- textbox --></td><tr>
  <tr><td><!-- label is bar --><!-- textbox --></td><tr>
  <tr><td><!-- label --><!-- textbox --></td><tr>
  <tr><td><!-- label --><!-- textbox --></td><tr>
</table>

how could I in JQuery determine the index of the row that has had it’s textbox amended (on blur)? So if a user adds a value to the textbox on the third row (“label is bar”) I could alert the row index (in this case 2)?

I’m assuming I’d get the table id, perform an each on the tr, then find the text box using children and when that child has it’s onblur event activated we then use parent to output the index?

Any ideas?

Thanks

Answer 1

$("input[type=text]").blur(function() {
    alert($(this).closest("tr").index());
});

This attaches the blur event to all input elements with type="text". You might want to narrow down that selector to only select inputs inside your table.

In the event handler function, it gets the closest tr (that is, the first ancestor element of this which is a tr, and gets the index of that).

Here’s an example fiddle showing it in action.

As noted in another answer, you may actually be looking for the change event, rather than the blur event as you say in your question. The change event will fire when the value of the input actually changes, as opposed to whenever it loses focus. If that’s the case, simply change the word blur to change.