<link rel="STYLESHEET" type="text/css" href="styles/calendar.css">
	<script language="JavaScript" src="javascript/simplecalendar.js" type="text/javascript"></script>
<script type = 'text/javascript'>
function insCell()
{
var x=document.getElementById('tr1').insertCell(1);
var y=document.getElementById('tr2').insertCell(1);
x.innerHTML= 'Day 1';
y.innerHTML='<input type = "text" name = "day"><img src="images/calendar.gif" name="imgCalendar" width="34" height="21" border="0" alt=""><a href="javascript: void(0);" onmouseover="if (timeoutId) clearTimeout(timeoutId);window.status='Show Calendar';return true;" onmouseout="if (timeoutDelay) calendarTimeout();window.status='';" onclick="g_Calendar.show(event,'frm.day',true,'yyyy-mm-dd'); return false;"></a> ';
}
</script>
	<form id="form2" name="frm" method="post">
	<table id = 'class'border='1' cellpadding='0' cellspacing='0'>
	
	<tr id = "tr1">
		<th>Day</th>
	</tr>
	<tr id = "tr2">
		<td>
			<input type="text" name="day" >
			<a href="javascript: void(0);" onmouseover="if (timeoutId) clearTimeout(timeoutId);window.status='Show Calendar';return true;" onmouseout="if (timeoutDelay) calendarTimeout();window.status='';" onclick="g_Calendar.show(event,'frm.day',true,'yyyy-mm-dd'); return false;"><img src="images/calendar.gif" name="imgCalendar" width="34" height="21" border="0" alt=""></a>
		</td>
		<input type="button" onclick="insCell()" value="Insert cell">
	</tr>
	</form>
</table>

Hi all, i need help with the codes above. I added in calendar js into a insert new cell function. However, it don't seems to be working. There is no new inserting of cell when i click on the button. It seem like those codes in red is hindering the code to execute. Is there any way to append within the javascript? Please help me! Thanks alot!

I think your y.innerHTML string is broken,
try to add back slashed before single qoute e.g. beside window.status=

y.innerHTML='<input type = "text" name = "day"><img src="images/calendar.gif" name="imgCalendar" width="34" height="21" border="0" alt=""><a href="javascript<b></b>: void(0);" onmouseover="if (timeoutId) clearTimeout(timeoutId);window.status=\'Show Calendar\';return true;" onmouseout="if (timeoutDelay) calendarTimeout();window.status='';" onclick="g_Calendar.show(event,\'frm.day\',true,\'yyyy-mm-dd\'); return false;"></a> ';

thanks for your help! i tried it before. But it is not working neither

BTW what is your requirement?
what output you want?

I want the output to be a new cell to be insert with input of calendar when the button is click

in onclick="g_Calendar.show(event,'frm.day',true,'yyyy-mm-dd'); return false;"
frm.day shows form name frm having field name day .

Here your form have already one day input field.And you are again giving day field name in insCell function.

js will not executed as it founds two day field in frm.
so try different name in insCell function.

don't seems to be working neither. i thought that the frm.day must be tally to the form name and input name?

<html>
<head>
<link rel="STYLESHEET" type="text/css" href="styles/calendar.css">
<script language="JavaScript" src="javascript/simplecalendar.js" type="text/javascript"></script>
</head>	
<body> 
<script type = 'text/javascript'>
var cnt = 1;
function insCell()
{
	var x=document.getElementById('tr1').insertCell(1);
	var y=document.getElementById('tr2').insertCell(1);
	x.innerHTML= 'Day '+cnt;
	y.innerHTML='<input type="text" name="day'+cnt+'" ><a href="javascript: void(0);" onclick="g_Calendar.show(event,\'frm.day'+cnt+'\',true,\'yyyy-mm-dd\'); return false;"><img src="images/calendar.gif" name="imgCalendar" width="34" height="21" border="0" alt=""></a>';
	cnt++;
}
</script>
<form id="form2" name="frm" method="post">
	<table id='class' border='1' cellpadding='0' cellspacing='0'>
	
	<tr id = "tr1">
		<th>Day</th>
	</tr>
	<tr id = "tr2">
		<td>
			<input type="text" name="day" >
			<a href="javascript<b></b>: void(0);" onmouseover="if (timeoutId) clearTimeout(timeoutId);window.status='Show Calendar';return true;" onmouseout="if (timeoutDelay) calendarTimeout();window.status='';" onclick="g_Calendar.show(event,'frm.day',true,'yyyy-mm-dd'); return false;"><img src="images/calendar.gif" name="imgCalendar" width="34" height="21" border="0" alt=""></a>
		</td>
		<input type="button" onclick="insCell()" value="Insert cell">
	</tr>
</form>
</body>
</html>

check this code.. hope it helps....

Hey! It works! thanks a million!

I have last question to ask you, now the column is added to the right.
eg. day 3, day 2 , day 1

How can i change it to day 1, day 2, day 3 instead?

Replace this js code.

<script type = 'text/javascript'>
var cnt = 1;
function insCell()
{
	var x=document.getElementById('tr1').insertCell(cnt);
	var y=document.getElementById('tr2').insertCell(cnt);
	x.innerHTML= 'Day '+cnt;
	y.innerHTML='<input type="text" name="day'+cnt+'" ><a href="javascript: void(0);" onclick="g_Calendar.show(event,\'frm.day'+cnt+'\',true,\'yyyy-mm-dd\'); return false;"><img src="images/calendar.gif" name="imgCalendar" width="34" height="21" border="0" alt=""></a>';
	cnt++;
}
</script>

oh my goodness! thanks a lot to you! thanks!

Solved!

.insertCell(-1);