NewB-dynamic table-added rows recognition

[JohnShell]

Hi,

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 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() {
		$("#startdate").datepicker();
		$("#enddate").datepicker();
		$("#RcompStart").datepicker();
		$("#RcompEnd").datepicker();
	});
</script>

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

The object (input) for the above is

<td><p>
<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">
/*<![CDATA[*/
		   
  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){
   return;}
    var row = tbl.insertRow(lastRow);
    var cellLeft = row.insertCell(0);
    var textNode = document.createElement('input');          
      textNode.size = 7;
      textNode.name = 'startdate' + iteration;		  
          cellLeft.appendChild(textNode); 
	new_rows[row_count]['cell']=textNode;
    var cellRight = row.insertCell(1);          
    var el = document.createElement('input');          
          el.type = 'text';          
          el.name = 'enddate' + iteration;          
          el.id = 'enddate' + iteration;          
          el.size = 7; 
       new_rows[row_count]['cell2']=el;
         cellRight.appendChild(el);          
          // 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');          
          cellRightSel.appendChild(sel);
            new_rows[row_count]['cell3']=sel;
     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;         
          cellRight.appendChild(el);
          new_rows[row_count]['cell']=el;
          row_count++;
     }
     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);
     }
	 /*]]>*/
</script>

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