jquery get the index of a row?

Question

Even this isn't working....

$("table#mytable > tbody > tr").each(function(index) {
    if($(this).attr('id','firstrow')) {
        $("input[name^=f1]").focus(function() {
            var newRow = '<tr><td></td><td></td></tr>';
            $("tbody").append(newRow);
        });         
    } else {
        $("input[name^=f2]").focus(function() {
        var newRow = '<tr><td></td><td></td></tr>';
        $("tbody").append(newRow);  
        });         
    }
});

<table id="mytable">
<tbody>
<!-- this is the first row, if the user clicks in f1, a new row is appended -->
<tr valign="top" id="firstrow">
    <td><input type="hidden" value="secret" name="std"></td>
    <td><input type="text" class="form-text" value="" name="f1[]"><label>F1</label></td>
    <td><input type="text" class="form-text" value="" name="f3[]"><label>F2</label></td>
    <td><input type="text" class="form-text" value="" name="f4[]"><label>F4</label></td>
</tr>

<!-- this is the new row that is append if the user clicks in f1.  From here on out, a new row is appended if the user clicks in f2 -->
<tr valign="top">
    <td><input type="text" value="" name="f2"></td>
    <td><input type="text" value="" name="f1[]"><label>F1</label></td>
    <td><input type="text" value="" name="f3[]"><label>F2</label></td>
    <td><input type="text" value="" name="f4[]"><label>F4</label></td>
</tr>
</tbody>
</table>

The html I'm working with...

<table id="mytable">
<tbody>
<!-- this is the first row, if the user clicks in f1, a new row is appended -->
<tr valign="top">
    <td><input type="hidden" value="secret" name="std"></td>
    <td><input type="text" class="form-text" value="" name="f1[]"><label>F1</label></td>
    <td><input type="text" class="form-text" value="" name="f3[]"><label>F3</label></td>
    <td><input type="text" class="form-text" value="" name="f4[]"><label>F4</label></td>
</tr>

<!-- this is the new row that is append if the user clicks in f1.  From here on out, a new row is appended if the user clicks in f2 -->
<tr valign="top">
    <td><input type="text" value="" name="f2[]"><label>F2</label></td>
    <td><input type="text" value="" name="f1[]"><label>F1</label></td>
    <td><input type="text" value="" name="f3[]"><label>F3</label></td>
    <td><input type="text" value="" name="f4[]"><label>F4</label></td>
</tr>
</tbody>
</table>

Yet another revision that still isn't working. I'm not even getting the alert...

$("table#mytable > tbody > tr").each(function() {
        if($(this).index(0)) {
            $("input[name^=f1]").focus(function() {
            var newRow = '<tr><td></td><td></td></tr>';
                $("tbody").append(newRow);
            });         
        } else {
            $("input[name^=f2]").focus(function() {
                                                         alert(index);
            var newRow = '<tr><td></td><td></td></tr>';
            $("tbody").append(newRow);  
            });         
        }
    });

Edit - Latest revision, but still isn't working...

if($("#mytable > tbody > tr:first")) {
            $("input[name^=f1]").focus(function() {
            var newRow = '<tr><td></td><td></td></tr>';
            $("tbody").append(newRow);
            });
    }

    if($("#mytable > tbody > tr:not(:first)")) {
            $("input[name^=f2]").focus(function() {
            var newRow = '<tr><td></td><td></td></tr>';
            $("tbody").append(newRow);  
            });
    }

I'm trying to write a function that will do something if the the row index is 0, and then something else if the row index is greater than 0. The zero part is working, but I can't figure out the syntax for rows that have an index greater than 0.

For the tr[0] row, I'm doing this:

if($("#mytable > tbody > tr ").index(0)) {

...

I tried:

if($("#mytable > tbody > tr ").index() > 0 ) {

But, that didn't work?

Answer 1

If you're looping through the items:

$('#mytable>tbody>tr').each(
    function(index, item)
    {
        if(0 == index)
        {
            // Do something
        }
        else
        {
            // Do something else
        }
    }
);

Or, you could use two different objects, kinda like this:

var firstOne = $('#mytable>tbody>tr:first');
var otherOnes = $('#mytable>tbody>tr').filter(function(index) { return 0 < index; });

You can also use the :first pseudoclass combined with not(), but I'm not entirely sure how that would be written. (I'd speculate not(:first) after tr.)

Answer 2

You can use the first and not selectors, like this:

$(document).ready(function() {
    var firstRow = $('table tbody tr:first');
    var others = $('table tbody tr:not(:first)');
    //do your required work with firstRow and others...
});

Answer 3

To get the the first row you could use:

$("#mytable > tbody > tr:first")

More flexible is the gt() Selector (or also eq()):

$("#mytable > tbody > tr:gt(0)")

Answer 4

http://jsfiddle.net/rRRYK/2/ index() works just fine check the example

Answer 5

$("#mytable").delegate('tr:gt(0) input[name^=f2]', 'focus', function () {
    $('#mytable > tbody').append('<tr><td></td><td></td></tr>');
});
$('#mytable tr:first-child input[name^=f1]').bind('focus', function () {
    $('#mytable > tbody').append('<tr><td></td><td></td></tr>');
});

One of your problems is that the remaining rows are added after the focus event was bound, which was why I've opted to use delegate for the rows that aren't the first row.

Answer 6

You can check for rowIndex property of TR (DOM Level 2) and do stuff based on it. See here