Member Avatar for lf.gene 
<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!

Edited by lf.gene because: n/a
  • 3 Contributors
  • 13 Replies
  • 212 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by fxm
Member Avatar for vibhaJ

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> ';
Member Avatar for lf.gene

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

Member Avatar for vibhaJ

BTW what is your requirement?
what output you want?

Member Avatar for lf.gene

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

Member Avatar for vibhaJ

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.

Member Avatar for lf.gene

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

Member Avatar for vibhaJ 
<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....

Member Avatar for lf.gene

Hey! It works! thanks a million!

Member Avatar for lf.gene

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?

Member Avatar for vibhaJ

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>
Member Avatar for lf.gene

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

Member Avatar for lf.gene

Solved!

Edited by lf.gene because: n/a
Member Avatar for fxm 
.insertCell(-1);
Edited by fxm because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.