Building on Dunc's Tabular Form Solution

I often use Dunc's javascript add/delete row solution when building tabular forms manually with the apex_item functions. For tabular forms where I think it will be useful for the user to use the up and down keys to navigate I use this solution from Roel Hartman.

The issue I have is that these two solutions don't work very well together. Each row added is a clone of the first row in the tabular form and therefore does not have an incremental id value. I have added two lines to Dunc's javascript function that will update the IDs for the added row and maintain the integrity of the navigation function. The addRow function now becomes:

function addRow(theRegionId)

{

var allTabs = document.getElementById(theRegionId).getElementsByTagName("table");

for(var i =0 ; i < allTabs.length ; i++)

{

if (allTabs[i].id.indexOf("datatable") >= 0)

{

table = document.getElementById(allTabs[i].id);

break;

}

}

var newRow = table.tBodies[0].rows[1].cloneNode(true);

table.tBodies[0].appendChild(newRow);

// Identifies how many rows there are in the Tabular Form

var oRows = document.getElementById('report_'+theRegionId).getElementsByTagName('tr').length

var inputElements = newRow.getElementsByTagName("input");

for (i = 0; i < inputElements.length; i++)

{

inputElements[i].value = "";

// Updates the ID value

inputElements[i].setAttribute('id',inputElements[i].getAttribute('name')+'_'+pad(oRows-3,4));

}

}

function delRow(theElement)

{

var rowToDelete = theElement.parentNode.parentNode;

var parentTable = theElement.parentNode.parentNode.parentNode.parentNode;

document.getElementById(parentTable.id).deleteRow(rowToDelete.rowIndex);

}