JSFiddle - React, Tailwind, and code Playground

by Barry Margolin

HTML

<table id="dataTable">
    <tr><th>Heading</th></tr>
    <tr><TD><INPUT type="text" name="when"/></TD></tr>
</table>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" class="add_remove_row" />

JavaScript

$(document).ready(function() {
    $('[name="when"]').datepicker();
});


function addRow(tableID) {
    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var colCount = table.rows[01].cells.length;

    for(var i=0; i<colCount; i++) {
        var newcell = row.insertCell(i);

        newcell.innerHTML = table.rows[1].cells[i].innerHTML;


        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;
        }
    }
    setClass(row);
}

function setClass(newrow) {
    $(newrow).find('.hasDatepicker').removeAttr('id').removeClass('hasDatepicker').datepicker();
}