[jQuery] Re: Add Table row

Hi!

I just finished the script on my application, almost everything seems
to work fine so far (Firefox, IE6/7), but i have a little problem,
this line of code does not seems to add the attribute on IE7:

$( "#delete_link"+ intCurrentRowId , clonedRow ).attr( "onclick",
"someJSfunction( this )" );
$( "#style_number"+ intCurrentRowId , clonedRow ).attr( "onblur",
"someJSfunction( this )" );

All of the other attributes are working without problems, but why not
the onclick and onblur? what am i doing wrong?

Thanks for you help, by the way, suggestions are very welcome!

The 2 Javascript functions (add and delete, delete just to check if is
right :) ) are very similar to:

function duplicateRow( strTableName )
{
        // First, lets create the new row using the last one as template...
        var clonedRow = $( "#" + strTableName + " tr:last" ).clone();
        // Take the current identifier, some number in the first cell of the
row
        intCurrentRowId = parseInt( $( "#numberIdentifier:last",
clonedRow ).html() );
        // Set the new ID
        intNewRowId = intCurrentRowId + 1;
        // Change the current identifier of the row to the new one
        $( "#numberIdentifier:last", clonedRow ).html( intNewRowId );

        // Now let's create the Delete link using the ID of the new TR
        $( "#delete_link"+ intCurrentRowId , clonedRow ).attr( "onclick",
"deleteRow( '"+ strTableName +"', 'detailsTr"+ intNewRowId +"' )" );
        // Some link to populate the field with a javascript function
    $( "#show_popup"+ intCurrentRowId , clonedRow ).attr( "onclick",
"populate( this );" );

        $( "#style_number"+ intCurrentRowId , clonedRow ).attr( "onblur",
"validate ( this, 'StyleNumberState" + intNewRowId + "' )" );
        // Change the Id / Name or anything you want for the new attribs...
here is where you need to add a lot of stuff to change the id of your
variables

    // The following code works without problems on Firefox or IE7
        $( "#style_number"+ intCurrentRowId , clonedRow ).attr( { "id" :
"style_number" + intNewRowId, "accesskey" : intNewRowId, "value" :
"" } );
        $( "#name"+ intCurrentRowId , clonedRow ).attr( { "id" : "name" +
intNewRowId, "value" : "" } );
        $( "#quantity"+ intCurrentRowId , clonedRow ).attr( { "id" :
"quantity" + intNewRowId, "value" : "" } );
        $( "#show_popup"+ intCurrentRowId , clonedRow ).attr( { "id" :
"show_popup" + intNewRowId } );
        $( "#delete_link"+ intCurrentRowId , clonedRow ).attr( { "id" :
"delete_link" + intNewRowId } );
        $( "#StyleNumberState"+ intCurrentRowId , clonedRow ).attr( { "id" :
"StyleNumberState" + intNewRowId } );

        // Add to the new row to the original table
        $( "#" + strTableName ).append( clonedRow );
        // And finally change the ID of the last row to something we can
delete later, not sure why can not be done before the append :S
        $( "#" + strTableName + " tr:last" ).attr( "id", "detailsTr" +
intNewRowId );
}



function deleteRow( strTableName, strId )
{
    if ( $( "#" + strTableName + " .detailsTr" ).length > 1 )
    {
        $( "#" + strTableName + " #" + strId ).remove();
    }
    else
    {
        alert( 'You have to keep at least 1 row!' );
    }
}


The Table looks like this:

<table id="details_table" class="formTable" >
    <tr>
        <td colspan="5" align="center"><a href="javascript:;"
onclick="duplicateRow( 'details_table' )">Add row</a></td>
    </tr>
    <tr id="detailsTr1" class="detailsTr">
        <td id="numberIdentifier" name="numberIdentifier">1</td>
        <td>
            <input name="style_number[]" id="style_number1" value=""
required="true" onblur="validate( this, 'StyleNumberState1' );"
accesskey="1" type="text">
            <a id="show_popup1" href="javascript:;"
onclick="populate( this );"><img src="/images/add.png"
align="absmiddle" border="0"> <strong>Search</strong></a>
        </td>
        <td><div id="StyleNumberState1"></div></td>
        <td><input name="name[]" id="name1" value="" size="20"
readonly="yes" required="false" err_label="Name Required"
type="text"></td>
        <td><input name="quantity[]" id="quantity1" value=""
maxlength="10" size="5" class="alignRight" required="false"
err_label="Quantity Required" type="text"></td>
        <td><a id="delete_link1" href="javascript:;"
onclick="deleteRow( 'details_table', 'detailsTr1', 1 )"> [Delete] </
a></td>
    </tr>
</table>



On Oct 2, 6:52 am, motob <[EMAIL PROTECTED]> wrote:
> Yes, this is possible. I'm doing the same type of thing on my app.
> You'll want to utilize the .clone() function.
>
> You could do something like this:
>
> var clonedRow = $("table tr :last).clone(); //this will grab the last
> table row.
>
> $("#formField", clonedRow).attr("id", "newID"); //use the selectors to
> manipulate any element in the clonedRow object.
>
> $("table").append(clonedRow); //add the row back to the table
>
> On Oct 1, 6:22 pm,camilo_u<[EMAIL PROTECTED]> wrote:
>
> > Hi,
>
> > I would like to use jQuery to add a row with form fields of a table to
> > the end of the table, the idea is to duplicate the previous one it
> > with all of the form fields (drop downs, input fields, hidden fields,
> > etc.) changing the input ID of each input, clearing the input values
> > and adding a "Delete button" at the end of the row to allow the user,
>
> > Pretty much like "Add new Row" button that basically will add a new
> > empty row following some sort of template changing the input IDs,
> > clearing the values, and adding a "Delete This row" link at the end.
>
> > Is this possible with jQuery? how can i do it?
>
> > Thanks in advance!
>
> > Camilo