Question

I have a web form which has dynamic table using repeating rows. New rows are added by calling the addRow function below:

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

I would like one datepicker (or more) in each row. Datepicker from here:
http://www.frequency-decoder.com/2011/10/11/unobtrusive-accessible-datepicker-widgit-v6

I need the following script for each datepicker:

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

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.

Thanks for your help!

Answer 1

You could create id’s for each of the inputs you create and also use a class to show which input should use the date picker …

Working demo here -> http://jsfiddle.net/S8Vky/3/

Example :

HTML

<table id="mytable">
    <tr>
        <td><input class="text" type="text" id="row-0-0" value=""/></td>
        <td><input class="cal" type="text" id="row-0-1" value=""/></td>
        <td><input class="cal" type="text" id="row-0-2" value=""/></td>
    </tr>
</table>
<input type="button" onclick="addRow('mytable')" value="Add Row"/>

JavaScript

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

        var newrowid = "row-" + rowCount + "-" + i;
        newcell.childNodes[0].id = newrowid;
        var obj = {};
        obj[newrowid] = "%d/%m/%Y";
        if (newcell.childNodes[0].className == 'cal') {
            datePickerController.createDatePicker({
                formElements: obj
            });
        }
    }
}