Question

I have the following table…

<table id="foo">
  <tr><td><!-- label --><!-- select --></td><tr>
  <tr><td><!-- label --><input type="text" /></td><tr>
  <tr><td><!-- label  --><!-- select --></td><tr>
  <tr><td><!-- label --><!-- radio buttons --></td><tr>
  <tr><td><!--hidden validation image--></td><tr>
</table>

Now when the page renders I hide all but the first row of my table using jQuery’s .each. Now I wish to expand my script so that when a user causes a blur event on the textbox I retrieve that row’s index and then show the next row, I’m using the following code for this:

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

However the value alerted seems to be -1? So there’s a problem there as it’s not finding the row. Can someone tell me why I’m being so dumb?

Please note that I have no control of the table as this is determined by the back of the system (which I’m not allowed to touch!)

Answer 1

Maybe you are trying to achieve this?

If so, here is the appropriate code.

HTML:

<table id="foo">
    <tr>
        <td>
            <input type="text" />
        </td>
    </tr>
    <tr>
        <td>
             <input type="text" />
        </td>
    </tr>
</table>

JS:

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

---

Edit

Your code is just fine. The problem should be somewhere else.