Hi,
I have a form which is embedded inside table, and I'd like to add new
form input to it. Here is my code:
function addRow(size){
// need to capture the row class, to add to the new
row
var firstRow=$("#dmsProductTable > tbody:first-child > tr:first-
child");
var firstRowClassNames=firstRow.attr('class');
var columnsInFirstRow=firstRow.find("td");
var numColumns=columnsInFirstRow.length;
for (var i=0; i<size;i++){
// need to capture the new row index prior to adding
new row
var newRowIndex = $("#dmsProductTable >
tbody:first-child > form >
tr").length;
var clonedRow= $("#dmsProductTable > tbody:first-child
> form >
tr:last-child").clone();
var tds=clonedRow.find("td");
clonedRow.find("td").each(function(){
$(this).find("input").each(function(){
var currentName=$(this).attr("name");
alert("current name " + currentName);
// take note of
this
var
newName=currentName.replace("["+(newRowIndex-1)+"]", "[" +
newRowIndex + "]");
$(this).attr("name",newName);
});
});
$("#dmsProductTable").append(clonedRow);
}
}
The HTML looks like:
<table id="dmsProductTable">
<tbody>
<form id="shitform">
<tr class="blah">
<td class="shit">
<input name="order[0]" class="number"
type="text" size="1"></
input>
</td>
</tr>
<tr class="blah">
<td class="shit">
<input name="order[1]" class="number"
type="text" size="1"></
input>
</td>
</tr>
</form>
</tbody>
</table>
This works fine in Firefox. It adds new row, and the index of the
'order' input is correctly set. However, in IE 7,
only the first addition to the form is correct. I.e. I will have
order[2]... but after that... any new addition will be
order[2] , order[2], and so on.
In my code above the
alert("current name " + currentName);
will always echo 'order[1]', even though new row has been added
(which will have 'order[2]', 'order[3]' and so on).
So it seems to me that the traversal doesnt really look at the latest
DOM - it remembers the first time the DOM is read.
Any help is much appreciated!
Thanks!
Alex.
