jquery append row onclick

Question

**EDIT --- Trying an even more simplified version.... Still doesn't work... Returns $(this).closest is not a function error... **

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

Original Post

Pretty new to jQuery, so I'm hoping someone can help me out... There's a couple of things going on here... Help with any part of it is appreciated.

For starters, I'm trying to append a row to a table when a user clicks in the first enabled input field for that row. Here's the code I'm trying to use:

    $("#fitable > tbody > tr > td > input").bind('focus', function() {
        if($(this).attr('disabled', false)) {
            $(this).click(function() {
                    var newRow = '<tr><td><input name="f1[]" value="" /><label>CustNew</label></td><td><input name="field_n1[]" value="" /><label>N1</label></td><td><input name="field_n2[]" value="" /><label>N2</label></td></tr>';
                    $(this).closest("tbody").append(newRow);
            });
        }
    });

If it's helpful, here's the html:

<table id="fitable">
    <tbody>
        <tr valign="top">
            <td><input disabled="disabled" name="cust" id="edit-cust" value="[email protected]" type="text"><label>Cust</label></td>
            <td><input name="field_n1[]" value="" type="text"><label>N1</label></td>
            <td><input name="field_n2[]" value="" type="text"><label>N2</label></td>
        </tr>
    </tbody>
</table>

Growl... Neither worked. No errors, and no appending. Do I need to go through the whole parent().parent()... rigamarole? — BigDogsBarking
– BigDogsBarking, Commented Apr 24, 2010 at 18:40

hookedonwinter · Accepted Answer · 2010-04-24 18:01:05Z

1

I think your if statement is setting the clicked attribute to false. Try this:

if( $( this ).attr( 'disabled' ) == false ) {
    // do stuff
}

answered Apr 24, 2010 at 18:01

hookedonwinter

12.7k19 gold badges64 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

BigDogsBarking Over a year ago

Thanks. I tried that, unfortunately, same behavior... as in no appending happening... Do you see anything else it could be?

hookedonwinter Over a year ago

in the if statement, add console.log( 'if' ); or something.. just to test you're actually getting into that statement. Then open your console and check for the log. Or, if you don't want to use the console, do alert( 'if' ); in place of console.log... let us know what happens

BigDogsBarking Over a year ago

alert('if') pops up, so I know I'm in the right place... I altered my code to make it even more simple, and it's still not appending... Going to edit my original post in just a sec so you can see the latest revision...

hookedonwinter Over a year ago

Try wrapping your append var: $( [your stuff] )

Jim Schubert · Accepted Answer · 2010-04-24 18:29:12Z

0

I think your selector is incorrect. Try this:

$("#fitable > tr td input:enabled:first").focus(function() {
    var newRow = '<tr><td><input name="f1[]" value="" /><label>CustNew</label></td><td><input name="field_n1[]" value="" /><label>N1</label></td><td><input name="field_n2[]" value="" /><label>N2</label></td></tr>';
    $(this).parents("tbody:first").append(newRow);
});

You don't have to check disabled in the handler function, because this will only bind to the enabled elements in the first place.

answered Apr 24, 2010 at 18:29

Jim Schubert

20.4k5 gold badges64 silver badges69 bronze badges

Comments

Luis · Accepted Answer · 2010-04-24 18:07:35Z

0

Try this:

$("#fitable input").focus(function() {
        if($(this).attr('disabled', false)) {
            $(this).click(function() {
                    var newRow = '<tr><td><input name="f1[]" value="" /><label>CustNew</label></td><td><input name="field_n1[]" value="" /><label>N1</label></td><td><input name="field_n2[]" value="" /><label>N2</label></td></tr>';
                    $(this).closest("tbody").append(newRow);
            });
        }
    });

answered Apr 24, 2010 at 18:07

Luis

6,0012 gold badges35 silver badges51 bronze badges

1 Comment

BigDogsBarking Over a year ago

Trying this returns an error: $(this).closest is not a function... (?)

Collectives™ on Stack Overflow

jquery append row onclick

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related