[jQuery] Re: Adding a table row and a form with jquery?

[Jack Killpatrick]

This doesn't directly address your question, but for rendering out HTML, 
you might want to consider trimpath templates:

http://code.google.com/p/trimpath/wiki/JavaScriptTemplates

I use them for all kinds of HTML rendering. Then you can just create 
regular HTML instead of cobbling together DOM nodes. I usually merge my 
data into the template and then bind event handlers to the generated DOM 
nodes via jquery. It's worked nicely for a lot of projects.

Anyway, a thought. I didn't carefully look at all the code below, but if 
the node creation for your tr is correct, you can append the row to a 
tbody, then append the tbody to a table and append the table to the 
form, I think.

- Jack

dougXN wrote:
Anyone have an idea how one might add a row to a table and have the
form elements in each column? Something like this:

            var newRow      = document.createElement( 'tr' );
            var groupCell   = document.createElement( 'td' );
            var roleCell    = document.createElement( 'td' );
            var requestCell = document.createElement( 'td' );
            var cancelCell  = document.createElement( 'td' );

            var groupSelect = document.createElement( "select" );
            groupSelect.setAttribute("id", 'group');

            var roleSelect = document.createElement( "select" );
            roleSelect.setAttribute("id", 'role' );

            // Not sure about this, but it seems that you have to put
the field
            // into the form then place it on the screen
            groupCell.appendChild( groupSelect );

            roleCell.appendChild( roleSelect );

            var requestButton = document.createElement( "Input" );
            requestButton.setAttribute( 'type', 'Button' );
            requestButton.setAttribute( 'value', 'Request' );
 
requestButton.setAttribute( 'onClick','makeRequest( this.form );');

            requestCell.appendChild( requestButton );

            var cancelButton = document.createElement( "Input" );
            cancelButton.setAttribute( 'type', 'Button' );
            cancelButton.setAttribute( 'value', 'Cancel' );
 
cancelButton.setAttribute( 'onClick','cancelRequest( this.form );');

            cancelCell.appendChild( cancelButton );

            newRow.appendChild( groupCell );
            newRow.appendChild( roleCell );
            newRow.appendChild( requestCell );
            newRow.appendChild( cancelCell );

            $('#groups').append( newRow ); // a little jquery action

Okay this looks good, but it is not associated with the form in the
DOM.....?

thanks
dn