View Full Version : JS dynamic table - added rows recognition

09-02-2010, 04:30 PM

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