Question

I’m writing some jquery to create a dynamic form table.

All it needs to do is clone a row, and then change a few properties of that row in order to make it unique.

So, my strategy is to first clone it, append it to the table, then get one of its child elements and modify it. Everything is working but the last part.

$(function () {
$(".appendRow").click(function() {
    var body = $(this).closest("tbody");
    var row = $(this).closest("tr");
    var newNum = $(".operation").size();
    $("#test").append("<p>newNum: " + newNum + "</p>");
    var clone = row.clone();    
    body.append(clone);
    var newRow = $(".RowNumber").get(newNum);
    var newRowNum = newNum + 1;
    $("#test").append("<p>newRowNum: " + newRowNum + "</p>");
    // $("#test").append("<p>type: " + newRow.type() + "</p>"); // tried to check type with this, error
    //newRow.html(newRowNum); // trying to change html of span element, fails with error
}); 

});

The first commented line was meant to help me debug. It, and other other commented line, resulted in an error in Google Chrome:

Local exception, type error, newRow is undefined.

Below is the html:

<form id="processname" name="processname" method="post" action="" >
<table border="1" width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td align="right" valign="middle">Order</td>
<td align="left" valign="middle">Process</td>
<td>Operation</td>
<td>Value</td>
<td>+</td>
<td>&ndash;</td>
</tr>

<tr>
<td><span class="rowNumber">1</span></td>
<!--<td><span class="rowNumber">1</span></td>-->
<td>
<select class="process" name="category_1" id="category_1" onChange="javascript: dropdownlist(this); elementPos(this)">
<option value="">Select Category</option>

<option value="3" selected="selected">translate</option>
<option value="4">math</option>
<option value="5">format</option>
<option value="6">write</option></select></td>
<td align="left" valign="middle">
<select class="operation" name="operation_1" id="operation_1">
<option value="">Select Sub-Category</option>
<option value="s->c" selected="selected">Use source as core by default</option><option value="s->t->c">Only process translated values</option></select>
</td>
<td>
<input type="text" name="value_1" id="value_1" value="" />
</td>
    <td><input type="button" style="max-width:5em" class="appendRow" value="+" /></td>
    <td><input type="button" class="delRow" value="-" /></td>
</tr>
.
.
.

</table>
</form>

NOTE on May 29, 2013: I discovered recently that my Adblock Plus add on for Google Chrome was preventing class “addRow” from being visible (it uses display:none for a bunch of classes associated with ads). I’ve edited the question and answer to change the class to “appendRow” so that anyone copying this code won’t have the same problem I just had.

Answer 1

Why would you append an element, then get that element from the DOM to modify it when you can modify it before you append it ?

I have no idea what you’re trying to do, but maybe it’s something like this:

$(function() {
    $('#processname').on('click', '.addRow', function() {
        var body = $(this).closest("tbody");
        var row = $(this).closest("tr");
        var newNum = $(".operation").length + 1;
        var clone = row.clone();
        clone.find('.rowNumber').html(newNum);
        body.append(clone);
    });
});​

FIDDLE