I have a dynamic JS table and the user can add several rows then populate rows with data.
There are 4 columns in table. First row, first two columns have JQuery calendar. Third column has populated select list. Fourth column, first row has JS function to ensure that user enters integer/decimal with corresponding alert for incorrect entry.
Two things I want to do:
1. Populate added rows with JQuery calendars and integer/decimal alert.
2. Capture added rows and data from user entries so that information can be sent to database via ColdFusion programming.

The following is the js code I am using:

For the datepicker I linked to an in-house URL so this is the function -

$(function() {
The objects (inputs) for the above are

<td><input style="width: 70px" type="text" id="startdate"></td> 
<td><input style="width: 70px" type="text" id="enddate"></td>
For the numeric alert the function is

<script type="text/javascript">
function checkQuarters( fld )
    var val = parseFloat(fld.value);
    if ( isNaN(val) || ( val*4 != Math.floor(val*4) ) )
        alert("Value must be a numeric and a multiple of 0.25");
        return false;
    return true;
The object (input) for the above is

<form style="width: 5px; height: 1px;">
<input type="text" name="No. of Hours" id="No. of Hours" style="width: 70px;" onblur="checkQuarters(this);" /> </form> </td>
And to add and remove rows the function is

<script language="Javascript" type="text/javascript">
  var new_rows=new Array();
  var row_count=0;

function addRow()
    var tbl = document.getElementById('ReqDtTbl');
      new_rows[row_count]=new Array();
    var lastRow = tbl.rows.length;
    var iteration = lastRow;
  if (lastRow>7){
    var row = tbl.insertRow(lastRow);
    var cellLeft = row.insertCell(0);
    var textNode = document.createElement('input');          
      textNode.size = 7;
      textNode.name = 'startdate' + iteration;		  
    var cellRight = row.insertCell(1);          
    var el = document.createElement('input');          
          el.type = 'text';          
          el.name = 'enddate' + iteration;          
          el.id = 'enddate' + iteration;          
          el.size = 7; 
          // the last cell!
    var cellRightSel = row.insertCell(2);          
    var sel = document.createElement('select');          
          sel.name = 'TypeHrs' + iteration;          
          sel.options[0] = new Option('-Select-', '""');
          sel.options[1] = new Option('Comp Time', 'Comp Time');
          sel.options[2] = new Option('Credit Hrs', 'Credit Hrs');
          sel.options[3] = new Option('Overtime', 'Overtime');
            sel.options[4] = new Option('Rel Comp', 'Rel Comp');          
     var cellRight = row.insertCell(3);          
     var el = document.createElement('input');          
          el.type = 'text';          
          el.name = 'No. of Hours' + iteration;          
          el.id = 'No. of Hours' + iteration;          
          el.size = 7;         
     function removeRow()
          // grab element again
          var tbl = document.getElementById('ReqDtTbl');
          // grab length
          var lastRow = tbl.rows.length;
          // delete last row if there is more than one row
          if (lastRow > 2) tbl.deleteRow(lastRow - 1);
The buttons for this function are

<input type="button" value="Add a row" onclick="addRow('ReqDtTbl',5)";/>

   <input type="button" value="Remove a row" onclick="removeRow();" />
That's it.

Thanks - John