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