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);
}



Comments

Anonymous said…
Good work Simon - keep it up