/    Sign up×
Community /Pin to ProfileBookmark

Adding more rows to a table?

Copy linkTweet thisAlerts:
Nov 08.2005

Hi,

I have an existing table that needs to be updated from values added by the user. I would like to use the createElement function to add additional information….

Here is the existing table:

[code]
<table id=dates border=0 width=100% STYLE=”font-family:Arial;font-size:10pt”>
<tr>
<td align=center><span class=label>Jan 22, 2006</span>
</tr>
.
.
.
[/code]

Using JavaScript and the createElement etc., how would I insert another” <td align=center><span class=label>new date</span>” into the document?

I’ve been playing around with appendChild, getElemetsByTagName, etc., but so far have no success.

Any help would be appreciated!

Mike

to post a comment
JavaScript

25 Comments(s) ↴

Copy linkTweet thisAlerts:
@UltimaterNov 08.2005 — Don't forget that every table requires a TBODY and if you don't add it in with HTML, it automagically gets added in. So to add to a table with JavaScript you need to remember that you need to append the TBODY's child, not the TABLE's child.
<i>
</i>&lt;table id=dates border=0 width=100% STYLE="font-family:Arial;font-size:10pt"&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td align=center&gt;&lt;span class=label&gt;Jan 22, 2006&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;br&gt;&lt;br&gt;
&lt;script type="text/javascript"&gt;
function addE(){
var e=document.getElementById("dates");
e=e.getElementsByTagName("tbody")[0]
var j=document.createElement("tr");
var b=document.createElement("td");
b.appendChild(document.createTextNode("hi"))
b.align="center"
j.appendChild(b)
e.appendChild(j)
}
&lt;/script&gt;
&lt;input type="button" onclick="addE()" value="add row"&gt;
Copy linkTweet thisAlerts:
@Mike_BurdickauthorNov 08.2005 — Ultimater,

Thanks!

Okay...I'll try that...but how do I add the span and its attributes?

Mike
Copy linkTweet thisAlerts:
@UltimaterNov 08.2005 — To add:
<i>
</i>&lt;tr&gt;&lt;td style="text-align:center;"&gt;&lt;span class="label"&gt;new date&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;

It would look like this:
<i>
</i>&lt;table id=dates border=0 width=100% STYLE="font-family:Arial;font-size:10pt"&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td style="text-align:center"&gt;&lt;span class=label&gt;Jan 22, 2006&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;br&gt;&lt;br&gt;
&lt;script type="text/javascript"&gt;
function addE(){
var e=document.getElementById("dates");
e=e.getElementsByTagName("tbody")[0]
var j=document.createElement("tr");
var b=document.createElement("td");
var s=document.createElement("span");
s.className="label";
var t=document.createTextNode("new date");
s.appendChild(t);
b.appendChild(s)
b.style.textAlign="center"
j.appendChild(b)
e.appendChild(j)
}
&lt;/script&gt;
&lt;input type="button" onclick="addE()" value="add row"&gt;
Copy linkTweet thisAlerts:
@Mike_BurdickauthorNov 08.2005 — Ultimater,

Okay...I'm beginning to understand! Since this is an existing table can I control exactly where the span will be inserted?

Mike
Copy linkTweet thisAlerts:
@UltimaterNov 08.2005 — Yes you can.
<i>
</i>&lt;table id=dates border=0 width=100% STYLE="font-family:Arial;font-size:10pt"&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td style="text-align:center"&gt;&lt;span class=label&gt;Jan 22, 2006&lt;/span&gt;&lt;/td&gt;&lt;td style="text-align:center"&gt;&lt;span class=label&gt;Jan 23, 2006&lt;/span&gt;&lt;/td&gt;&lt;td style="text-align:center"&gt;&lt;span class=label&gt;Jan 24, 2006&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align:center"&gt;&lt;span class=label&gt;Jan 25, 2006&lt;/span&gt;&lt;/td&gt;&lt;td style="text-align:center"&gt;&lt;span class=label&gt;Jan 26, 2006&lt;/span&gt;&lt;/td&gt;&lt;td style="text-align:center"&gt;&lt;span class=label&gt;Jan 27, 2006&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;br&gt;&lt;br&gt;
&lt;script type="text/javascript"&gt;
function addE(){
var e=document.getElementById("dates");
e=e.getElementsByTagName("tbody")[0];
e=e.getElementsByTagName("tr")[0];
e=e.getElementsByTagName("td")[1];
var sp=e.getElementsByTagName("span")[0];
var s=document.createElement("span");
s.className="label";
var t=document.createTextNode("new date");
s.appendChild(t);
e.removeChild(sp);
e.appendChild(s);
}
&lt;/script&gt;
&lt;input type="button" onclick="addE()" value="change 1st tr 2nd td"&gt;
Copy linkTweet thisAlerts:
@Mike_BurdickauthorNov 08.2005 — Ultimater,

Thanks!!
Copy linkTweet thisAlerts:
@Mike_BurdickauthorNov 08.2005 — Ultimater,

I know I asked how to add rows, but what about just adding data to an existing row? What should I do to the code below to achieve that?

<i>
</i>var e=document.getElementById("dates");
e=e.getElementsByTagName("tbody")[0];
e=e.getElementsByTagName("tr")[0];
e=e.getElementsByTagName("td")[0];
var sp=e.getElementsByTagName("span")[0];
for(i=0;i&lt;7;i++){
s=document.createElement("span");
s.className="label";
var t=document.createTextNode(arrD[i]);
s.appendChild(t);
//e.removeChild(sp);
e.appendChild(s);
}
Copy linkTweet thisAlerts:
@UltimaterNov 08.2005 — <i>
</i>&lt;table id=dates border=0 width=100% STYLE="font-family:Arial;font-size:10pt"&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td style="text-align:center"&gt;&lt;span class=label&gt;Jan 22, 2006&lt;/span&gt;&lt;/td&gt;&lt;td style="text-align:center"&gt;&lt;span class=label&gt;Jan 23, 2006&lt;/span&gt;&lt;/td&gt;&lt;td style="text-align:center"&gt;&lt;span class=label&gt;Jan 24, 2006&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align:center"&gt;&lt;span class=label&gt;Jan 25, 2006&lt;/span&gt;&lt;/td&gt;&lt;td style="text-align:center"&gt;&lt;span class=label&gt;Jan 26, 2006&lt;/span&gt;&lt;/td&gt;&lt;td style="text-align:center"&gt;&lt;span class=label&gt;Jan 27, 2006&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;br&gt;&lt;br&gt;
&lt;script type="text/javascript"&gt;
var arrD=[1,2,3,4,5,6,7,8]
function addE(){
var e=document.getElementById("dates");
e=e.getElementsByTagName("tbody")[0];
e=e.getElementsByTagName("td");
for(i=0;i&lt;7;i++){
s=document.createElement("span");
s.className="label";
var t=document.createTextNode(arrD[i]);
s.appendChild(t);
e[i].removeChild(e[i].getElementsByTagName("span")[0])
e[i].appendChild(s);
}
}
&lt;/script&gt;
&lt;input type="button" onclick="addE()" value="change 1st tr 2nd td"&gt;
Copy linkTweet thisAlerts:
@Mike_BurdickauthorNov 08.2005 — Ultimater,

Hmmmm...I get the first element in the array to print on one line, then the rest are printed 2 rows down and then across as wanted. What is causing this? Here's how I have the code inserted for my case:

<i>
</i>var arrD = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat")
var e=document.getElementById("dates");
e=e.getElementsByTagName("tbody")[0];
e=e.getElementsByTagName("td");
// e[0].removeChild(e[0].getElementsByTagName("span")[0])
for(i=0;i&lt;7;i++){
s=document.createElement("span");
s.className="label";
t=document.createTextNode(arrD[i]);
s.appendChild(t);
e[i].appendChild(s);
}



Mike
Copy linkTweet thisAlerts:
@UltimaterNov 08.2005 — Give me the actual page you are testing the JavaScript on because you surely aren't using the same TABLE as I am -- the whole page you are testing please.
Copy linkTweet thisAlerts:
@Mike_BurdickauthorNov 08.2005 — Ultimater,

That was a typo that I made in posting the question. Sorry for being late on the edit.

Anyway it's not there and I still have that same printing problem - Sun is on one line and Mon-Friday are two rows down. Any clues to why this is?

Thanks
Copy linkTweet thisAlerts:
@UltimaterNov 08.2005 — Yes, because you are using a different TABLE than I am :p

Again, can I have the exact code you are executing? A link would be just as good or an attachment. We need to know what your table looks like.

Without that information, my closest guess would be:
<i>
</i>for(var i=1,t,s;i&lt;7;i++)
Copy linkTweet thisAlerts:
@Mike_BurdickauthorNov 08.2005 — Ultimater,

Here's basically the table. I know there are other ways to dynamically create this table but I need to do it with the methods you are showing me. I'll need to fill in the table data for each of the items started, but for now, I'm just filling in the first so I can learn how to do it.

<i>
</i>&lt;table id=dates border=0 width=100% STYLE="font-family:Arial;font-size:10pt"&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td align=center&gt;&lt;span class=label&gt;Sun&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align=center&gt;&lt;span id=sp0 onclick="changeBg(this.id)"&gt;1&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align=center&gt;&lt;span id=sp7 onclick="changeBg(this.id)"&gt;1&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align=center&gt;&lt;span id=sp14 onclick="changeBg(this.id)"&gt;1&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align=center&gt;&lt;span id=sp21 onclick="changeBg(this.id)"&gt;1&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align=center&gt;&lt;span id=sp28 onclick="changeBg(this.id)"&gt;1&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align=center&gt;&lt;span id=sp35 onclick="changeBg(this.id)"&gt;1&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;

Copy linkTweet thisAlerts:
@UltimaterNov 08.2005 — <i>
</i>&lt;table id=dates border=0 width=100% STYLE="font-family:Arial;font-size:10pt"&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td align=center&gt;&lt;span class=label&gt;Sun&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align=center&gt;&lt;span id=sp0 onclick="changeBg(this.id)"&gt;1&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align=center&gt;&lt;span id=sp7 onclick="changeBg(this.id)"&gt;1&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align=center&gt;&lt;span id=sp14 onclick="changeBg(this.id)"&gt;1&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align=center&gt;&lt;span id=sp21 onclick="changeBg(this.id)"&gt;1&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align=center&gt;&lt;span id=sp28 onclick="changeBg(this.id)"&gt;1&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align=center&gt;&lt;span id=sp35 onclick="changeBg(this.id)"&gt;1&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;br&gt;&lt;br&gt;
&lt;script type="text/javascript"&gt;
function addE(){
var arrD = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat")
var e=document.getElementById("dates");
e=e.getElementsByTagName("tbody")[0];
e=e.getElementsByTagName("tr")[0];
var els=e.getElementsByTagName("td");
for(var j=els.length-1;j&gt;=0;j--){
//alert(j)
e.removeChild(els[j])
}
for(var i=0,t,s,td;i&lt;7;i++){
td=document.createElement("td");
td.style.textAlign="center";
s=document.createElement("span");
s.className="label";
t=document.createTextNode(arrD[i]);
s.appendChild(t);
td.appendChild(s)
e.appendChild(td);
}
}
&lt;/script&gt;
&lt;input type="button" onclick="addE()" value="update entire table"&gt;
Copy linkTweet thisAlerts:
@Mike_BurdickauthorNov 08.2005 — Ultimater,

That worked great!!

Sorry for not posting the table in the first place as I guess it wasted lots of your time. :o Anyway, I am amazed at how fast you can solve the problems! I'll study what you did so I can understand what happened.

Thanks again!!! ?

Mike
Copy linkTweet thisAlerts:
@Mike_BurdickauthorNov 09.2005 — Ultimater,

On the table some of the spans have an event handler onClick. How do I add that to the span?

Mike
Copy linkTweet thisAlerts:
@Mike_BurdickauthorNov 09.2005 — Ultimater,

If you have some time to look over this I'd sure appreciate your comments.

When I test this script in FireFox it renders okay the first time but if I close (hide) it and then reopen it, it will not render fully – no dates. This works okay in IE 6.0 though. As far as I know Mozilla supports everything that is in it. Do you have any clues as to what the problem is?

Next. When I add the onclick function (line 60) s.onclick=changeBg(s.id) to the function nothing seems to work beyond the function changeBg(s.id) line 105. From alert statements at that point I’m not getting a valid id but I am getting to that function.

Could all these problems be caused by the way I’m removing the existing table data when I recreate the table?

Anyway, I’m just lost and would appreciate any advice you might offer me.

Thanks for your time and consideration….

Mike

<i>
</i>&lt;html&gt;

&lt;head&gt;
&lt;style type="text/css"&gt;
span.label {color:black;width:30;height:16;text-align:center;margin-top:0;background:#b0ffff;font:bold 13px Arial}
span.c1 {color:black;width:30;height:16;text-align:center;margin-top:0;background:#b0ffff;font:bold 13px Arial}
span.c2 {color:red;width:30;height:16;text-align:center;margin-top:0;background:#b0ffff;font:bold 13px Arial}
span.c3 {color:#b0b0b0;width:30;height:16;text-align:center;margin-top:0;background:#b0ffff;font:bold 12px Arial}
&lt;/style&gt;
&lt;script language="JavaScript1.2"&gt;

function disappear(id){
document.getElementById(id).style.visibility="hidden";
}
function appear(id){
document.getElementById(id).style.visibility="visible";
}


/////////////////////////////////////////

function createCalendar(){
var now = new Date
var mm = now.getMonth()
var yyyy = now.getFullYear()
var temp=yyyy-1;
var i,s,t;
var arrM = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var arrD = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat")
var table=document.getElementById("dates");
var body=table.getElementsByTagName("tbody")[0];
var row=body.getElementsByTagName("tr")[0];
var oldCol=row.getElementsByTagName("td");
for(var j=oldCol.length-1;j&gt;=0;j--){
row.removeChild(oldCol[j])
}
for(var i=0,t,s,td;i&lt;7;i++){
td=document.createElement("td");
td.style.textAlign="center";
s=document.createElement("span");
s.className="label";
t=document.createTextNode(arrD[i]);
s.appendChild(t);
td.appendChild(s);
row.appendChild(td);
}
//now add the table data for the dates
var count=0,k;
for(k=1;k&lt;=6;k++){ <br/>
row=body.getElementsByTagName("tr")[k];
oldCol=row.getElementsByTagName("td");
for( j=oldCol.length-1;j&gt;=0;j--){
row.removeChild(oldCol[j])
}
for( i=0;i&lt;=6;i++){
td=document.createElement("td");
td.style.textAlign="center";
s=document.createElement("span");
s.id="sp"+count;
// s.onclick=changeBg(s.id); /////////////////////// this is not working
t=document.createTextNode("");
s.appendChild(t);
td.appendChild(s)
row.appendChild(td);
count++;
}
}
for(i=0;i&lt;=11;i++){
document.forms['calForm'].selMonth.options[i]=new Option(arrM[i],i);
}
document.calForm.selMonth.value=mm
for(i=0;i&lt;6;i++){
document.forms['calForm'].selYear.options[i] = new Option(temp,temp);
temp+=1;
}
document.calForm.selYear.value=yyyy;
changeCal()
appear('calendar');
}


/////////////////////////////////////




function maxDays(mm, yyyy){
var mDay;
if((mm == 3) || (mm == 5) || (mm == 8) || (mm == 10)){
mDay = 30;
}
else{
mDay = 31
if(mm == 1){
if (yyyy/4 - parseInt(yyyy/4) != 0){
mDay = 28
}
else{
mDay = 29
}
}
}
return mDay;
}
function changeBg(id){
object=document.getElementById(id);
if(object.innerHTML=="")return false;
if (object.style.backgroundColor != "yellow"){
object.style.backgroundColor = "yellow"
}
else{
object.style.backgroundColor = "#b0ffff"
}
}
function changeCal(){
var now = new Date
var dd = now.getDate()
var mm = now.getMonth()
var dow = now.getDay()
var yyyy = now.getFullYear()
var currM = parseInt(document.calForm.selMonth.value)
var prevM
if (currM!=0){
prevM = currM - 1
}
else{
prevM = 11
}
var currY = parseInt(document.calForm.selYear.value)
var mmyyyy = new Date()
mmyyyy.setFullYear(currY)
mmyyyy.setMonth(currM)
mmyyyy.setDate(1)
var day1 = mmyyyy.getDay()
if (day1 == 0){
day1 = 7
}
var arrN = new Array(41)
var aa
for (ii=0;ii&lt;day1;ii++){
arrN[ii] = "" // maxDays((prevM),currY) - day1 + ii + 1
}
aa = 1
for (ii=day1;ii&lt;=day1+maxDays(currM,currY)-1;ii++){
arrN[ii] = aa
aa += 1
}
aa = 1
for (ii=day1+maxDays(currM,currY);ii&lt;=41;ii++){
arrN[ii] ="" // aa
aa += 1
}
for (ii=0;ii&lt;=41;ii++){
eval("sp"+ii).style.backgroundColor = "#b0ffff"
}
var dCount = 0
for (ii=0;ii&lt;=41;ii++){
if (((ii&lt;7)&amp;&amp;(arrN[ii]&gt;20))||((ii&gt;27)&amp;&amp;(arrN[ii]&lt;20))){
eval("sp"+ii).innerHTML = arrN[ii]
eval("sp"+ii).className = "c3"
}
else{
eval("sp"+ii).innerHTML = arrN[ii]
if ((dCount==0)||(dCount==6)){
eval("sp"+ii).className = "c2"
}
else{
eval("sp"+ii).className = "c1"
}
if ((arrN[ii]==dd)&amp;&amp;(mm==currM)&amp;&amp;(yyyy==currY)){
eval("sp"+ii).style.backgroundColor="#90EE90"
}
}
dCount += 1
if (dCount&gt;6){
dCount=0
}
}
}


&lt;/script&gt;
&lt;/head&gt;
&lt;body id="body" bgcolor="#b0ffff" &gt;
&lt;div id=calendar style="cursor:default;position:absolute;z-index:100;visibility:hidden;top:20;left:200;border-left:3px solid #ffffff;border-right:3px solid #999999;border-top:3px solid #ffffff;border-bottom:3px solid #999999;background-color:#b0ffff"&gt;
&lt;div id=cal_title style="cursor:hand;cursor:pointer;font:bold 13px Arial;color:white;position:relative;height:25;width=250;top:0;left:0;background-color:blue;border:2px solid white"&gt;Calendar&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;input name="close_cal" STYLE="font-family:Arial;font-size:13pt;height:20;width:20;font:bold" type="Button" value="X" tabindex=-1 onClick="disappear('calendar')"&gt;
&lt;/div&gt;
&lt;form name=calForm&gt;
&lt;table border=0 width=250&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;table width=100% border=0&gt;
&lt;tr&gt;
&lt;td align=left&gt;
&lt;select name="selMonth" onChange="changeCal()"&gt;
&lt;option value=""&gt;&lt;/option&gt;
&lt;/select&gt;
&lt;/td&gt;
&lt;td align=right&gt;
&lt;select name="selYear" onChange="changeCal()"&gt;
&lt;option value=""&gt;&lt;/option&gt;
&lt;/select&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;table id=dates border=0 width=100% STYLE="font-family:Arial;font-size:10pt"&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td align=center&gt;&lt;span class=label&gt;Sun&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align=center&gt;&lt;span id=sp0 onclick="changeBg('sp0')"&gt;1&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align=center&gt;&lt;span id=sp7 onclick="changeBg('sp7')"&gt;1&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align=center&gt;&lt;span id=sp14 onclick="changeBg('sp14')"&gt;1&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align=center&gt;&lt;span id=sp21 onclick="changeBg('sp21')"&gt;1&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align=center&gt;&lt;span id=sp28 onclick="changeBg('sp28')"&gt;1&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align=center&gt;&lt;span id=sp35 onclick="changeBg('sp35')"&gt;1&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/form&gt;
&lt;/div&gt;

&lt;input type=button value=Calendar name=calendar_button onclick="createCalendar()"&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy linkTweet thisAlerts:
@UltimaterNov 09.2005 — First off, to get it to work in Firefox like it does in IE,

replace EVERY instance of:

[color=blue]eval[/color]

with:

[color=blue]getElementById[/color]

Beyond that I'm not sure what you mean.
Copy linkTweet thisAlerts:
@Mike_BurdickauthorNov 09.2005 — Okay I'll change all the eval's and see if that's the problem.
Copy linkTweet thisAlerts:
@UltimaterNov 09.2005 — Ohhhhh, I see what you are trying to do now, I finally found your comment:
<i>
</i> // s.onclick=changeBg(s.id); /////////////////////// this is not working


Ok here's what you do to hi-light days:

Correction part 1:
<i>
</i>s.onclick=function(){changeBg(this)};

Correction part2:
<i>
</i>function changeBg(object){
if(object.innerHTML=="")return false;
if (object.style.backgroundColor != "yellow"){
object.style.backgroundColor = "yellow"
}
else{
object.style.backgroundColor = "#b0ffff"
}
}
Copy linkTweet thisAlerts:
@Mike_BurdickauthorNov 09.2005 — Yep, that did it!

When I changed the eval's it rendered okay in FF too.

Sheesh....I spent over half the day getting nowhere with it.

Thanks ever so much for your help...you have no idea how I appreciate it!

Mike
Copy linkTweet thisAlerts:
@UltimaterNov 09.2005 — I should inform you that you don't need to add rows to the table at all to accomplish the very-same task that this code is accomplishing. It is very easily-possible to write the same code using around 70% less coding. Instead of doing a bunch of appending and removing of children and creating elements, just have the TABLE pre-made in HTML and simply change the firstChild.data of each TD's SPAN tag. Since the SPAN tag will only contain a textNode, when you aren't using a cell, just set the SPAN's innerHTML or firstChild.data to a null string.

When I get some more free time, tomorrow in the morning (about 9 hours from now), I can re-write this thing for you.
Copy linkTweet thisAlerts:
@UltimaterNov 09.2005 — It is valid HTML 4.01 Strict now.
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html dir="ltr" lang="en"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;title&gt;&lt;/title&gt;
&lt;style type="text/css"&gt;
tr.label td{color:black;width:30;height:16;text-align:center;margin-top:0;background:#b0ffff;font:bold 13px Arial}
td.c1 {color:black;width:30;height:16;text-align:center;margin-top:0;background:#b0ffff;font:bold 13px Arial}
td.c2 {color:red;width:30;height:16;text-align:center;margin-top:0;background:#b0ffff;font:bold 13px Arial}
td.c3 {color:#b0b0b0;width:30;height:16;text-align:center;margin-top:0;background:#b0ffff;font:bold 12px Arial}
tr.ctd td{text-align:center;}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;



function createCalendar(){
changeCal();
calendar.style.display="block";
}



function maxDays(mm, yyyy){
var mDay;
if((mm == 3) || (mm == 5) || (mm == 8) || (mm == 10)){
mDay = 30;
}
else{
mDay = 31
if(mm == 1){
if (yyyy/4 - parseInt(yyyy/4) != 0){
mDay = 28
}
else{
mDay = 29
}
}
}
return mDay;
}


function changeBg(object){
if( !(object.firstChild) || !(object.firstChild.data) || object.firstChild.data=="")return false;


if(tableElements[selectedDay]==object){
if (object.style.backgroundColor != "lime"){
object.style.backgroundColor = "lime"
}
else{
object.style.backgroundColor = "rgb(114,238,114)"
}
return true
}
if (object.style.backgroundColor != "yellow"){
object.style.backgroundColor = "yellow"
}
else{
object.style.backgroundColor = "#b0ffff"
}
return true
}
function changeCal(){
selectedDay=0;
var o=7,now = new Date(),dd = now.getDate(),mm = now.getMonth(),dow = now.getDay(),yyyy = now.getFullYear();
var currM = parseInt(document.calForm.selMonth.value),prevM;
if (currM!=0){
prevM = currM - 1
}
else{
prevM = 11
}
var currY = parseInt(document.calForm.selYear.value)
var mmyyyy = new Date()
mmyyyy.setFullYear(currY)
mmyyyy.setMonth(currM)
mmyyyy.setDate(1)
var day1 = mmyyyy.getDay()
if (day1 == 0){
day1 = 7
}
var arrN = new Array(41)
var aa
for (ii=0;ii&lt;day1;ii++){
arrN[ii] = "" // maxDays((prevM),currY) - day1 + ii + 1
}
aa = 1
for (ii=day1;ii&lt;=day1+maxDays(currM,currY)-1;ii++){
arrN[ii] = aa
aa += 1
}
aa = 1
for (ii=day1+maxDays(currM,currY);ii&lt;=41;ii++){
arrN[ii] ="" // aa
aa += 1
}
for (ii=0;ii&lt;=41;ii++){
tableElements[ii+o].style.backgroundColor = "#b0ffff"
}
var dCount = 0
for (ii=0;ii&lt;=41;ii++){
if (((ii&lt;7)&amp;&amp;(arrN[ii]&gt;20))||((ii&gt;27)&amp;&amp;(arrN[ii]&lt;20))){
tableElements[ii+o].innerHTML = arrN[ii]
tableElements[ii+o].className = "c3"
}
else{
tableElements[ii+o].innerHTML = arrN[ii]
if ((dCount==0)||(dCount==6)){
tableElements[ii+o].className = "c2"
}
else{
tableElements[ii+o].className = "c1"
}
if ((arrN[ii]==dd)&amp;&amp;(mm==currM)&amp;&amp;(yyyy==currY)){
tableElements[ii+o].style.backgroundColor="rgb(114,238,114)";//#90EE90
selectedDay=ii+o;
}
}
dCount += 1
if (dCount&gt;6){
dCount=0
}
}
}


&lt;/script&gt;
&lt;script type="text/javascript"&gt;
var tableElements,table,calendar,selectedDay;

onload=function(){
table=document.getElementById("dates");
var body=table.getElementsByTagName("tbody")[0];
tableElements=body.getElementsByTagName("td");
calendar=document.getElementById("calendar")

var now = new Date
var mm = now.getMonth()
var yyyy = now.getFullYear()
var temp=yyyy-1;
var i,s,t;
var arrM = new Array("January","February","March","April","May","June","July","August","September","October","November","December");

for(i=0;i&lt;=11;i++){
document.forms['calForm'].selMonth.options[i]=new Option(arrM[i],i);
}
document.calForm.selMonth.value=mm
for(i=0;i&lt;6;i++){
document.forms['calForm'].selYear.options[i] = new Option(temp,temp);
temp+=1;
}
document.calForm.selYear.value=yyyy;

for(i=7;i&lt;45;i++)
tableElements[i].onclick=function(){changeBg(this)}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body id="body" style="background-color:#b0ffff;"&gt;
&lt;div id=calendar style="cursor:default;position:absolute;z-index:100;top:20px;left:200px;border-left:3px solid #ffffff;border-right:3px solid #999999;border-top:3px solid #ffffff;border-bottom:3px solid #999999;background-color:#b0ffff;display:none;"&gt;
&lt;div id=cal_title style="cursor:hand;cursor:pointer;font:bold 13px Arial;color:white;position:relative;height:25px;width:250px;top:0;left:0;background-color:blue;border:2px solid white"&gt;Calendar&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;input name="close_cal" style="font-family:Arial;font-size:13pt;height:20px;width:20px;font:bold" type="Button" value="X" tabindex="0" onclick="calendar.style.display='none';"&gt;
&lt;/div&gt;
&lt;form name="calForm" action="#"&gt;
&lt;table style="width:250px; border:0;"&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;table style="width:100%; border:0;"&gt;
&lt;tr&gt;
&lt;td align=left&gt;
&lt;select name="selMonth" onChange="changeCal()"&gt;
&lt;option value=""&gt;&lt;/option&gt;
&lt;/select&gt;
&lt;/td&gt;
&lt;td align=right&gt;
&lt;select name="selYear" onChange="changeCal()"&gt;
&lt;option value=""&gt;&lt;/option&gt;
&lt;/select&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;table id="dates" style="font-family:Arial;font-size:10pt;width:100%; border:0;"&gt;
&lt;tbody&gt;
&lt;tr class="label"&gt;
&lt;td&gt;Sun&lt;/td&gt;&lt;td&gt;Mon&lt;/td&gt;&lt;td&gt;Tue&lt;/td&gt;&lt;td&gt;Wed&lt;/td&gt;&lt;td&gt;Thu&lt;/td&gt;&lt;td&gt;Fri&lt;/td&gt;&lt;td&gt;Sat&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="ctd"&gt;
&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="ctd"&gt;
&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="ctd"&gt;
&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="ctd"&gt;
&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="ctd"&gt;
&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="ctd"&gt;
&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/form&gt;
&lt;/div&gt; <br/>
&lt;div&gt;
&lt;input type="button" value="Calendar" name="calendar_button" onclick="createCalendar()"&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@Mike_BurdickauthorNov 09.2005 — Ultimater,

Wow that is a lot less code! Now to understand what you did…. :o

Thanks!

Mike

Oh….while you’re here…Is it okay to have an Id [B]and[/B] a name that is the same in an element?

<i>
</i>&lt;input type=text name=calculate id=calculate value=""&gt;
Copy linkTweet thisAlerts:
@UltimaterNov 09.2005 — Yeah, it's ok.
×

Success!

Help @Mike_Burdick spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...