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);
var newRow = table.tBodies[0].rows[1].cloneNode(true);

// 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
function delRow(theElement)
var rowToDelete = theElement.parentNode.parentNode;
var parentTable = theElement.parentNode.parentNode.parentNode.parentNode;



Anonymous said…
Good work Simon - keep it up