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

$("#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.