P
philin007
Hi ,
I am having a page where leave is applied.
- In this page 1 new rows is created dynamically everytime the 'Add
row' button is pressed
- Each row has a begin date text field and beside it a calendar,
enddate texr field and a calendar etc...
- It has a delete button for each row so onecan delete the row is its
not needed.In total there has to be 5 rows and minimum 1 row.
Now the problem is there is a function called 'reorderRows' . Which is
it re-initialises the text boxes (the objects in the row)..there is
some errors I face when this is done. would any of you able to figure
out what causes the error . I am guessing its the calendar
re-initialisation error
(The calendar css and .js files can be downloaded from
http://www.dhtmlgoodies.com/index.html?page=calendarScripts)
Following is the codes
**************************************************
<html>
<head>
<script language="JavaScript" type="text/javascript"
src="tabledeleterow-calendar.js"></script><style type="text/css">
<!--
#tblSample td, th { padding: 0.5em; }
..classy0 { background-color: #FFFFFF; color: #FFFFFF; }
..classy1 { background-color: #FFFFFF; color: #FFFFFF; }
-->
</style>
<link rel="stylesheet" href="dhtmlgoodies_calendar.css"
media="screen"></LINK>
<SCRIPT type="text/javascript" src="dhtmlgoodies_calendar.js"></script>
<!-- Checking for decimal Input-->
<script language="JavaScript">
// tabledeleterow-calendar.js version 1.2.1 2006-05-04
// based off tabledeleterow.js version 1.2 2006-02-21
// mredkj.com
// CONFIG notes. Below are some comments that point to where this
script can be customized.
// Note: Make sure to include a <tbody></tbody> in your table's HTML
var INPUT_BEG_DT = 'txtBeginDt'
var INPUT_END_DT = 'txtEndDt'
var INPUT_TYPE = 'selTyp'
var INPUT_DT_DIFF = 'txtLVDays'
var INPUT_BEGDT_CAL = 'img'
var INPUT_ENDDT_CAL = 'img1'
var TABLE_NAME = 'tblSample'; // this should be named in the HTML
var ROW_BASE = 1; // first number (for display)
var hasLoaded = false;
window.onload=fillInRows;
function fillInRows()
{
hasLoaded = true;
addRowToTable();
}
// CONFIG:
// myRowObject is an object for storing information about the table
rows
function myRowObject(one, two, three, four, five, six)
{
this.one = one; // text object
this.two = two; // input text object
this.three = three;
this.four = four;
this.five = five;
this.six = six;
}
/*
* addRowToTable
* Inserts at row 'num', or appends to the end if no arguments are
passed in. Don't pass in empty strings.
*/
function addRowToTable(num)
{
if (hasLoaded) {
var tbl = document.getElementById(TABLE_NAME);
var nextRow = tbl.tBodies[0].rows.length;
if (nextRow >5)
{return;}
var iteration = nextRow + ROW_BASE;
if (num == null) {
num = nextRow;
} else {
iteration = num + ROW_BASE;
}
// add the row
var row = tbl.tBodies[0].insertRow(num);
// CONFIG: requires classes named classy0 and classy1
row.className = 'classy' + (iteration % 2);
// CONFIG: This whole section can be configured
// cell 0 - text
//var cell0 = row.insertCell(0);
//var textNode = document.createTextNode(iteration);
//cell0.appendChild(textNode);
// cell 0 - input text
var cell0 = row.insertCell(0);
var txtInp0 = document.createElement('input');
txtInp0.type = 'text';
txtInp0.name = 'txtBeginDt' + iteration;
txtInp0.id = 'txtBeginDt' + iteration;
txtInp0.size = 10;
txtInp0.value = '';
cell0.appendChild(txtInp0);
var img = document.createElement('IMG');
img.setAttribute('src', 'img/cal.gif');
img.onclick =
function(){displayCalendar(document.forms[0].elements["txtBeginDt"+iteration],'dd/mm/yyyy',this)}
cell0.appendChild(img);
// cell 1 - input text
var cell1 = row.insertCell(1);
var txtInp1 = document.createElement('input');
txtInp1.type = 'text';
txtInp1.name = 'txtEndDt' + iteration;
txtInp1.id = 'txtEndDt' + iteration;
txtInp1.size = 10;
txtInp1.value = '';
cell1.appendChild(txtInp1);
var img1 = document.createElement('IMG');
img1.setAttribute('src', 'img/cal.gif');
img1.onclick =
function(){displayCalendar(document.forms[0].elements["txtEndDt"+iteration],'dd/mm/yyyy',this)}
cell1.appendChild(img1);
var cell2 = row.insertCell(2);
var NewSelect = document.createElement('SELECT');
NewSelect.name = 'selTyp' + iteration;
addOption(NewSelect, 'A', 'A');
addOption(NewSelect, 'CNAME', 'CNAME');
addOption(NewSelect, 'N', 'N');
addOption(NewSelect, 'MX', 'MX');
addOption(NewSelect, 'PTR', 'PTR');
cell2.appendChild(NewSelect);
// cell 3 - input text
var cell3 = row.insertCell(3);
var txtInp = document.createElement('input');
txtInp.type = 'text';
txtInp.name = 'txtLVDays' + iteration;
txtInp.id = 'txtLVDays' + iteration;
txtInp.size = 4;
txtInp.value = '';
cell3.appendChild(txtInp);
// cell 4 - delete button
var cell4 = row.insertCell(4);
var img = document.createElement('IMG');
img.setAttribute('src', 'images/delete.jpg');
img.onclick = function(){deleteCurrentRow(this);}
cell4.appendChild(img);
// Pass in the elements you want to reference later
// Store the myRow object in each row
row.myRow = new myRowObject(txtInp0,txtInp1,NewSelect,txtInp,img,img1);
}
}
function addOption(sel, val, txt) {
var o = document.createElement("OPTION");
var t = document.createTextNode(txt);
o.setAttribute("value",val);
o.appendChild(t);
sel.appendChild(o);
}
// If there isn't an element with an onclick event in your row, then
this function can't be used.
function deleteCurrentRow(obj)
{
if (hasLoaded) {
var tbl = document.getElementById(TABLE_NAME);
var nextRow = tbl.tBodies[0].rows.length;
if (nextRow <3)
{return;}
var delRow = obj.parentNode.parentNode;
var tbl = delRow.parentNode.parentNode;
var rIndex = delRow.sectionRowIndex;
var rowArray = new Array(delRow);
deleteRows(rowArray);
reorderRows(tbl, rIndex);
}
}
function reorderRows(tbl, startingIndex)
{
if (hasLoaded) {
if (tbl.tBodies[0].rows[startingIndex]) {
var count = startingIndex + ROW_BASE;
for (var i=startingIndex; i<tbl.tBodies[0].rows.length; i++) {
// CONFIG: next line is affected by myRowObject settings
//tbl.tBodies[0].rows.myRow.one.data = count; // text
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows.myRow.one.name = INPUT_BEG_DT + count; // input
text
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows.myRow.two.name = INPUT_END_DT + count; // input
text
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows.myRow.three.name = INPUT_TYPE + count; // input
text
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows.myRow.four.name = INPUT_DT_DIFF + count; //
input text
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows.myRow.five.name = INPUT_BEGDT_CAL; // input text
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows.myRow.six.name = INPUT_ENDDT_CAL; // input text
// CONFIG: requires class named classy0 and classy1
//tbl.tBodies[0].rows.className = 'classy' + (count % 2);
count++;
}
}
}
}
function deleteRows(rowObjArray)
{
if (hasLoaded) {
for (var i=0; i<rowObjArray.length; i++) {
var rIndex = rowObjArray.sectionRowIndex;
rowObjArray.parentNode.deleteRow(rIndex);
}
}
}
function openInNewWindow(frm)
{
// open a blank window
var aWindow = window.open('', 'TableAddRow2NewWindow',
'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
// set the target to the blank window
frm.target = 'TableAddRow2NewWindow';
// submit
frm.submit();
}
</script>
</head>
<body>
<form action="tableaddrow_nw.html" method="get">
<p>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Submit"
onclick="openInNewWindow(this.form);" />
</p>
<table cellpadding="0" cellspacing="1" border="0" width="100%">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td bgcolor="#004963">
<table id="tblSample" cellpadding="5" cellspacing="1" width="100%"
border="0">
<tr>
<th colspan="1" bgcolor="#004963"><font color="#ffffff"
size="1">From</font></th>
<th colspan="1" bgcolor="#004963"><font color="#ffffff"
size="1">To</font></td></th>
<th colspan="1" bgcolor="#004963"><font color="#ffffff" size="1">Sub
Type</font></td></th>
<th colspan="1" bgcolor="#004963"><font color="#ffffff" size="1">Leave
Applied</font></td></th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellspacing="0" >
<thead>
<tr>
<th colspan="4">Sample table</th>
</tr>
<tr>
<th>#</th><th>Input Text</th><th>Input
Text2</th><th>Calendar</th><th>Delete</th>
</tr>
</thead>
<tbody></tbody>
</table>
</form>
</body>
</html>
***************************************************************
thanks very much in advance
regards
philin
I am having a page where leave is applied.
- In this page 1 new rows is created dynamically everytime the 'Add
row' button is pressed
- Each row has a begin date text field and beside it a calendar,
enddate texr field and a calendar etc...
- It has a delete button for each row so onecan delete the row is its
not needed.In total there has to be 5 rows and minimum 1 row.
Now the problem is there is a function called 'reorderRows' . Which is
it re-initialises the text boxes (the objects in the row)..there is
some errors I face when this is done. would any of you able to figure
out what causes the error . I am guessing its the calendar
re-initialisation error
(The calendar css and .js files can be downloaded from
http://www.dhtmlgoodies.com/index.html?page=calendarScripts)
Following is the codes
**************************************************
<html>
<head>
<script language="JavaScript" type="text/javascript"
src="tabledeleterow-calendar.js"></script><style type="text/css">
<!--
#tblSample td, th { padding: 0.5em; }
..classy0 { background-color: #FFFFFF; color: #FFFFFF; }
..classy1 { background-color: #FFFFFF; color: #FFFFFF; }
-->
</style>
<link rel="stylesheet" href="dhtmlgoodies_calendar.css"
media="screen"></LINK>
<SCRIPT type="text/javascript" src="dhtmlgoodies_calendar.js"></script>
<!-- Checking for decimal Input-->
<script language="JavaScript">
// tabledeleterow-calendar.js version 1.2.1 2006-05-04
// based off tabledeleterow.js version 1.2 2006-02-21
// mredkj.com
// CONFIG notes. Below are some comments that point to where this
script can be customized.
// Note: Make sure to include a <tbody></tbody> in your table's HTML
var INPUT_BEG_DT = 'txtBeginDt'
var INPUT_END_DT = 'txtEndDt'
var INPUT_TYPE = 'selTyp'
var INPUT_DT_DIFF = 'txtLVDays'
var INPUT_BEGDT_CAL = 'img'
var INPUT_ENDDT_CAL = 'img1'
var TABLE_NAME = 'tblSample'; // this should be named in the HTML
var ROW_BASE = 1; // first number (for display)
var hasLoaded = false;
window.onload=fillInRows;
function fillInRows()
{
hasLoaded = true;
addRowToTable();
}
// CONFIG:
// myRowObject is an object for storing information about the table
rows
function myRowObject(one, two, three, four, five, six)
{
this.one = one; // text object
this.two = two; // input text object
this.three = three;
this.four = four;
this.five = five;
this.six = six;
}
/*
* addRowToTable
* Inserts at row 'num', or appends to the end if no arguments are
passed in. Don't pass in empty strings.
*/
function addRowToTable(num)
{
if (hasLoaded) {
var tbl = document.getElementById(TABLE_NAME);
var nextRow = tbl.tBodies[0].rows.length;
if (nextRow >5)
{return;}
var iteration = nextRow + ROW_BASE;
if (num == null) {
num = nextRow;
} else {
iteration = num + ROW_BASE;
}
// add the row
var row = tbl.tBodies[0].insertRow(num);
// CONFIG: requires classes named classy0 and classy1
row.className = 'classy' + (iteration % 2);
// CONFIG: This whole section can be configured
// cell 0 - text
//var cell0 = row.insertCell(0);
//var textNode = document.createTextNode(iteration);
//cell0.appendChild(textNode);
// cell 0 - input text
var cell0 = row.insertCell(0);
var txtInp0 = document.createElement('input');
txtInp0.type = 'text';
txtInp0.name = 'txtBeginDt' + iteration;
txtInp0.id = 'txtBeginDt' + iteration;
txtInp0.size = 10;
txtInp0.value = '';
cell0.appendChild(txtInp0);
var img = document.createElement('IMG');
img.setAttribute('src', 'img/cal.gif');
img.onclick =
function(){displayCalendar(document.forms[0].elements["txtBeginDt"+iteration],'dd/mm/yyyy',this)}
cell0.appendChild(img);
// cell 1 - input text
var cell1 = row.insertCell(1);
var txtInp1 = document.createElement('input');
txtInp1.type = 'text';
txtInp1.name = 'txtEndDt' + iteration;
txtInp1.id = 'txtEndDt' + iteration;
txtInp1.size = 10;
txtInp1.value = '';
cell1.appendChild(txtInp1);
var img1 = document.createElement('IMG');
img1.setAttribute('src', 'img/cal.gif');
img1.onclick =
function(){displayCalendar(document.forms[0].elements["txtEndDt"+iteration],'dd/mm/yyyy',this)}
cell1.appendChild(img1);
var cell2 = row.insertCell(2);
var NewSelect = document.createElement('SELECT');
NewSelect.name = 'selTyp' + iteration;
addOption(NewSelect, 'A', 'A');
addOption(NewSelect, 'CNAME', 'CNAME');
addOption(NewSelect, 'N', 'N');
addOption(NewSelect, 'MX', 'MX');
addOption(NewSelect, 'PTR', 'PTR');
cell2.appendChild(NewSelect);
// cell 3 - input text
var cell3 = row.insertCell(3);
var txtInp = document.createElement('input');
txtInp.type = 'text';
txtInp.name = 'txtLVDays' + iteration;
txtInp.id = 'txtLVDays' + iteration;
txtInp.size = 4;
txtInp.value = '';
cell3.appendChild(txtInp);
// cell 4 - delete button
var cell4 = row.insertCell(4);
var img = document.createElement('IMG');
img.setAttribute('src', 'images/delete.jpg');
img.onclick = function(){deleteCurrentRow(this);}
cell4.appendChild(img);
// Pass in the elements you want to reference later
// Store the myRow object in each row
row.myRow = new myRowObject(txtInp0,txtInp1,NewSelect,txtInp,img,img1);
}
}
function addOption(sel, val, txt) {
var o = document.createElement("OPTION");
var t = document.createTextNode(txt);
o.setAttribute("value",val);
o.appendChild(t);
sel.appendChild(o);
}
// If there isn't an element with an onclick event in your row, then
this function can't be used.
function deleteCurrentRow(obj)
{
if (hasLoaded) {
var tbl = document.getElementById(TABLE_NAME);
var nextRow = tbl.tBodies[0].rows.length;
if (nextRow <3)
{return;}
var delRow = obj.parentNode.parentNode;
var tbl = delRow.parentNode.parentNode;
var rIndex = delRow.sectionRowIndex;
var rowArray = new Array(delRow);
deleteRows(rowArray);
reorderRows(tbl, rIndex);
}
}
function reorderRows(tbl, startingIndex)
{
if (hasLoaded) {
if (tbl.tBodies[0].rows[startingIndex]) {
var count = startingIndex + ROW_BASE;
for (var i=startingIndex; i<tbl.tBodies[0].rows.length; i++) {
// CONFIG: next line is affected by myRowObject settings
//tbl.tBodies[0].rows.myRow.one.data = count; // text
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows.myRow.one.name = INPUT_BEG_DT + count; // input
text
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows.myRow.two.name = INPUT_END_DT + count; // input
text
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows.myRow.three.name = INPUT_TYPE + count; // input
text
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows.myRow.four.name = INPUT_DT_DIFF + count; //
input text
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows.myRow.five.name = INPUT_BEGDT_CAL; // input text
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows.myRow.six.name = INPUT_ENDDT_CAL; // input text
// CONFIG: requires class named classy0 and classy1
//tbl.tBodies[0].rows.className = 'classy' + (count % 2);
count++;
}
}
}
}
function deleteRows(rowObjArray)
{
if (hasLoaded) {
for (var i=0; i<rowObjArray.length; i++) {
var rIndex = rowObjArray.sectionRowIndex;
rowObjArray.parentNode.deleteRow(rIndex);
}
}
}
function openInNewWindow(frm)
{
// open a blank window
var aWindow = window.open('', 'TableAddRow2NewWindow',
'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
// set the target to the blank window
frm.target = 'TableAddRow2NewWindow';
// submit
frm.submit();
}
</script>
</head>
<body>
<form action="tableaddrow_nw.html" method="get">
<p>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Submit"
onclick="openInNewWindow(this.form);" />
</p>
<table cellpadding="0" cellspacing="1" border="0" width="100%">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td bgcolor="#004963">
<table id="tblSample" cellpadding="5" cellspacing="1" width="100%"
border="0">
<tr>
<th colspan="1" bgcolor="#004963"><font color="#ffffff"
size="1">From</font></th>
<th colspan="1" bgcolor="#004963"><font color="#ffffff"
size="1">To</font></td></th>
<th colspan="1" bgcolor="#004963"><font color="#ffffff" size="1">Sub
Type</font></td></th>
<th colspan="1" bgcolor="#004963"><font color="#ffffff" size="1">Leave
Applied</font></td></th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellspacing="0" >
<thead>
<tr>
<th colspan="4">Sample table</th>
</tr>
<tr>
<th>#</th><th>Input Text</th><th>Input
Text2</th><th>Calendar</th><th>Delete</th>
</tr>
</thead>
<tbody></tbody>
</table>
</form>
</body>
</html>
***************************************************************
thanks very much in advance
regards
philin