Hi Sir,

i have 3 columns in my jsp page date of payment,amount recieved,no and i have 2 button in my jsp page ADD and delete button. when i click on add button,adding the new empty row here so I need to enter the values . finaly we can save the 2 or more row values at a time but i need to add the calenadar for the date of payment column .My code is


<script>
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

// left cell

//cellLeft.appendChild(textNode);

// 1 cell
var cellRight = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'check_dated';
el.id = 'check_dated';
datepicker="true";
datepicker_format="MM-DD-YYYY"
// el.value = 'check_dated';
el.setAttribute('check_dated', 'check_dated' + iteration);

el.size = 20;

//el.onkeypress = keyPressTest;
cellRight.appendChild(el);
// 2 cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'amount_recdd' ;
el.id = 'amount_recdd';
//el.value = 'amount_recdd';
el.setAttribute('amount_recdd', 'amount_recdd' );
el.size = 20;

// el.onkeypress = keyPressTest;
cellRight.appendChild(el);
// 3 cell
var cellLeft = row.insertCell(2);
var textNode = document.createTextNode(iteration);
var cellRight = row.insertCell(2);
var el = document.createElement('input');
el.type = 'text';
el.name = 'check_nod';
el.id = 'check_nod' ;
// el.value = 'check_nod' ;
el.size = 20;

//el.onkeypress = keyPressTest;
cellRight.appendChild(el);
// select cell
/** var cellRightSel = row.insertCell(2);
var sel = document.createElement('select');
sel.name = 'selRow' + iteration;
sel.options[0] = new Option('text zero', 'value0');
sel.options[1] = new Option('text one', 'value1');
cellRightSel.appendChild(sel);**/
}
/**function keyPressTest(e, obj)
{
var validateChkb = document.getElementById('chkValidateOnKeyPress');
if (validateChkb.checked) {
var displayObj = document.getElementById('spanOutput');
var key;
if(window.event) {
key = window.event.keyCode;
}
else if(e.which) {
key = e.which;
}
var objId;
if (obj != null) {
objId = obj.id;
} else {
objId = this.id;
}
displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
}
}**/
function removeRowFromTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 1) tbl.deleteRow(lastRow - 1);
}
function openInNewWindow(frm)
{
// open a blank window
var aWindow = window.open('', 'TableAddRowNewWindow',
'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');

// set the target to the blank window
frm.target = 'TableAddRowNewWindow';

// submit
frm.submit();
}
function validateRow(frm)
{
var chkb = document.getElementById('chkValidate');
if (chkb.checked) {
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length - 1;
var i;
for (i=1; i<=lastRow; i++) {
var aRow = document.getElementById('check_nod' + i);
if (aRow.value.length <= 0) {
alert('Row ' + i + ' is empty');
return;
}
}
}
openInNewWindow(frm);
}

</script>








<table border="1" bgcolor="#9CC0FC" id="tblSample" cellspacing=0 width="100%" cellpadding=0 style="VERTICAL-ALIGN: middle">
<tr>
<td align="left" width="180" height="34" bgcolor="#9CC0FC" ><font face="TimesNewRoman" color="black" size=2>
<input type="text" length="25" name=check_dated value="<%=check_dated%>" id="check_dated" required="yes" >

</font> </td>

<td align="left" width="180" height="34" bgcolor="#9CC0FC" ><font face="TimesNewRoman" color="black" size=2>
<input type="text" length="25" name=amount_recdd value="<%=amount_recdd%>" required="yes" >

</font> </td>
<td align="left" width="180" height="34" bgcolor="#9CC0FC" ><font face="TimesNewRoman" color="black" size=2>
<input type="text" length="25" name=check_nod value="<%=check_nod%>" required="yes" >
</font> </td>
<td align="left" width="180" height="34" bgcolor="#9CC0FC" ><font face="TimesNewRoman" color="black" size=2>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Delete" onclick="removeRowFromTable();" /> &nbsp;&nbsp;

</font> </td>

</tr>

<table>