Dynamic table with multiple datepickers
<p>I have a web form which has dynamic table using repeating rows. New rows are added by calling the addRow function below:</p>

<pre><code>function addRow(tableID) {

        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;

        for(var i=0; i&lt;colCount; i++) {


            var newcell = row.insertCell(i);

            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
            //alert(newcell.childNodes);
            switch(newcell.childNodes[0].type) {
                case "text":
                        newcell.childNodes[0].value = "";
                        break;
                case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                case "select-one":
                        newcell.childNodes[0].selectedIndex = 0;
                        break;
            }
</code></pre>

<p>I would like one datepicker (or more) in each row. Datepicker from here:
<a href="http://www.frequency-decoder.com/2011/10/11/unobtrusive-accessible-datepicker-widgit-v6" rel="nofollow">http://www.frequency-decoder.com/2011/10/11/unobtrusive-accessible-datepicker-widgit-v6</a></p>

<p>I need the following script for each datepicker:</p>

<pre><code>&lt;script&gt;
datePickerController.createDatePicker({ 
// Associate the text input to a DD/MM/YYYY date format                            
formElements:{"formInputName":"%Y-%m-%d"}
}); 
&lt;/script&gt; 
</code></pre>

<p>How can I easily execute this script for each table row that is added? I'm aware that using  in innerHTML does not work. Please see the attached image for the desired result.</p>

<p><img src="http://i.stack.imgur.com/sDq1p.jpg" alt="http://i.stack.imgur.com/HHn2w.jpg"></p>

<p>Thanks for your help!</p>
