HTMLHelp Forums > Javascript Dynamic Table Creation

Full Version: Javascript Dynamic Table Creation

HTMLHelp Forums > Programming > Client-side Scripting

mathceleb

May 16 2009, 09:16 PM

I'm trying to create a dynamic table. The file is locatd here: http://www.barrycode.com/tester.php

Below is the code, and I'm getting an object error:

CODE

<?php include("bcmenu.php"); ?>

<html>
<head>
<title>Dynamic Table</title>

<script>
var DEFAULT_WIDTH = 200;
var DEFAULT_HEIGHT = 200;

function lday(month,year)
{
var dd = new Date(year, month, 0);
return dd.getDate();
}

function CreateTable(cmonth, cyear, srcHolder)
{
prev_year = cyear;
next_year = cyear;
prev_month = cmonth-1;
next_month = cmonth+1;
if (prev_month == 0 )
{
prev_month = 12;
prev_year = cyear - 1;
}
if (next_month == 13 )
{
next_month = 1;
next_year = cyear + 1;
}

srcHolder.innerHTML = "";
var srcTable = document.createElement("table");
srcTable.border = 1;
srcTable.borderColor = "Black";
srcTable.height = DEFAULT_HEIGHT;
srcTable.width = DEFAULT_WIDTH;
// srcTable.align = "center";
var tmpRow = null;
var tmpCell = null;
srcHolder.appendChild(srcTable);
x=new Date();
maxday=lday(cmonth,cyear);
fom=newDate(cyear,cmonth-1,1);
startday=fom.getDay();
alert(startday);
for(i=0; i<(maxday+startday); i++)
{
targday=i-startday+1;
if((i % 7) == 0 ) {tmpRow = srcTable.insertRow();}

tmpCell = tmpRow.insertCell();
tmpCell.innerText = targday;
tmpCell = null;
if((i % 7) == 6 ) {tmpRow = null;}
}

}
</script>

</head>

<body onload="CreateTable(5,2009,divHolder)">

<div id=divHolder>

</div>

</body>
</html>

pandy

May 16 2009, 10:21 PM

My debugger says the error is on line 1320 and points to the below line if that's to any help.

CODE

fom=newDate(cyear,cmonth-1,1);

It looks like you have included a whole other HTML document. You have two HTML, two HEAD and so on. There's and onload attribute in the BODY tag close to the end of the main document. That can't help.

mathceleb

May 16 2009, 10:41 PM

QUOTE(pandy @ May 16 2009, 10:21 PM)

My debugger says the error is on line 1320 and points to the below line if that's to any help.

CODE

fom=newDate(cyear,cmonth-1,1);

Below is a better calendar that I started. I'm trying to install 2 arrows, left and right that click to the previous and next month. I'm getting a JS error I'm not sure of: I cannot see the previous arrow, and when I click the next arrow, I get an error: http://www.barrycode.com/calendar2.php

CODE

<HTML>
<HEAD>
<TITLE>JavaScripted Static Table</TITLE>
<script LANGUAGE="JavaScript">
// function becomes a method for each month object
function getFirstDay(theYear, theMonth){
    var firstDate = new Date(theYear,theMonth,1)
    return firstDate.getDay() + 1
}
// number of days in the month
function getMonthLen(theYear, theMonth) {
    var oneDay = 1000 * 60 * 60 * 24
    var thisMonth = new Date(theYear, theMonth, 1)
    var nextMonth = new Date(theYear, theMonth + 1, 1)
    var len = Math.ceil((nextMonth.getTime() -
        thisMonth.getTime())/oneDay)
    return len
}
// correct for Y2K anomalies
function getY2KYear(today) {
    var yr = today.getYear()
    return ((yr < 1900) ? yr+1900 : yr)
}
// create basic array
theMonths = new MakeArray(12)
// load array with English month names
function MakeArray(n) {
    this[0] = "January"
    this[1] = "February"
    this[2] = "March"
    this[3] = "April"
    this[4] = "May"
    this[5] = "June"
    this[6] = "July"
    this[7] = "August"
    this[8] = "September"
    this[9] = "October"
    this[10] = "November"
    this[11] = "December"
    this.length = n
    return this
}
// end -->
</SCRIPT>
</HEAD>
<body onload = "calshow(5,2009)" >

<?php
?>

<script LANGUAGE="JavaScript">

</SCRIPT>
</BODY>
</HTML>

Christian J

May 17 2009, 06:23 AM

QUOTE(mathceleb @ May 17 2009, 05:41 AM)

I cannot see the previous arrow,

I see both.

CODE

and when I click the next arrow, I get an error

I could make both arrows work in all my browsers (newest versions) except MSIE by replacing

CODE

document.write(content)

with

CODE

document.body.innerHTML=content;

mathceleb

May 17 2009, 11:12 AM

QUOTE(Christian J @ May 17 2009, 06:23 AM)

QUOTE(mathceleb @ May 17 2009, 05:41 AM)

I cannot see the previous arrow,

I see both.

CODE

and when I click the next arrow, I get an error

I could make both arrows work in all my browsers (newest versions) except MSIE by replacing

CODE

document.write(content)

with

CODE

document.body.innerHTML=content;

I'm using MSIE. I see both arrows now, but it still errors out on clicking the arrows. Everything else works perfect. I'm going to research to see why this does not work in MSIE, any suggestions would be appreciated. Thanks for your help!

mathceleb

May 17 2009, 12:16 PM

I found another workaround that works even better.

Thanks for all your help, code is below:

CODE

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
</head>

<script type="text/javascript">
// merge table below with our calendar2.php code, and inside the loop, see if we can assign values
function getFirstDay(theYear, theMonth)
{
var firstDate = new Date(theYear,theMonth,1)
return firstDate.getDay() + 1
}
// number of days in the month
function getMonthLen(theYear, theMonth) {
    var oneDay = 1000 * 60 * 60 * 24
    var thisMonth = new Date(theYear, theMonth, 1)
    var nextMonth = new Date(theYear, theMonth + 1, 1)
    var len = Math.ceil((nextMonth.getTime() -
        thisMonth.getTime())/oneDay)
    return len
}
// correct for Y2K anomalies
function getY2KYear(today) {
    var yr = today.getYear()
    return ((yr < 1900) ? yr+1900 : yr)
}
// create basic array
theMonths = new MakeArray(12)
// load array with English month names
function MakeArray(n) {
    this[0] = "January"
    this[1] = "February"
    this[2] = "March"
    this[3] = "April"
    this[4] = "May"
    this[5] = "June"
    this[6] = "July"
    this[7] = "August"
    this[8] = "September"
    this[9] = "October"
    this[10] = "November"
    this[11] = "December"
    this.length = n
    return this
}

function calshow(cmonth,cyear)
{

// pick up onload to conver to current month
if (cmonth==9999)
{
var d = new Date();
var cmonth = d.getMonth()+1;
var cyear = d.getFullYear();
}

prev_year = cyear;
next_year = cyear;
prev_month = cmonth-1;
next_month = cmonth+1;

if (prev_month == 0 )
{
prev_month = 12;
prev_year = cyear - 1;
}
if (next_month == 13 )
{
next_month = 1;
next_year = cyear + 1;
}

theMonth=cmonth-1;

// which is the first day of this month?
var firstDay = getFirstDay(cyear, theMonth)
// total number of <TD>...</TD> tags needed in for loop below
var howMany = getMonthLen(cyear, theMonth) + firstDay

// spit out current month text, and 2 arrow links
document.getElementById('chead').innerHTML="<a href='java script:calshow(" + prev_month + "," + prev_year + ")'>←</a>    " + theMonths[theMonth] + " " + cyear + "    <a href='java script:calshow(" + next_month + "," + next_year + ")'>→</a>";

// populate calendar
for (var i = 1; i < howMany; i++)
{
cday=(i - firstDay + 1);

if (i < firstDay)
{
// 'empty' boxes prior to first day
document.getElementById(i).innerHTML='';
}
else
{
// enter date number
document.getElementById(i).innerHTML="<a href='bday.php?curmonth=" + cmonth + "&curday=" + cday + "' title='Click to see MLB Birthdays on " + cmonth + "-" + cday + "'>" + cday + "</a>";
}

}
// end for i loop

}

</script>

<body onload="calshow(9999,9999)">

<table border="1" width="200px">
<tr>
<th COLSPAN=7>Barry Code Birthday Board</th>
</tr>
<tr>
<th id='chead' COLSPAN=7></th>
</tr>
  <tr>
    <th>Sun</th>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
  </tr>
  <tr>
    <td id='1'> </td>
    <td id='2'> </td>
    <td id='3'> </td>
    <td id='4'> </td>
    <td id='5'> </td>
    <td id='6'> </td>
    <td id='7'> </td>
  </tr>
  <tr>
    <td id='8'> </td>
    <td id='9'> </td>
    <td id='10'> </td>
    <td id='11'> </td>
    <td id='12'> </td>
    <td id='13'> </td>
    <td id='14'> </td>
  </tr>
  <tr>
    <td id='15'> </td>
    <td id='16'> </td>
    <td id='17'> </td>
    <td id='18'> </td>
    <td id='19'> </td>
    <td id='20'> </td>
    <td id='21'> </td>
  </tr>
    <tr>
    <td id='22'> </td>
    <td id='23'> </td>
    <td id='24'> </td>
    <td id='25'> </td>
    <td id='26'> </td>
    <td id='27'> </td>
    <td id='28'> </td>
  </tr>
  <tr>
    <td id='29'> </td>
    <td id='30'> </td>
    <td id='31'> </td>
    <td id='32'> </td>
    <td id='33'> </td>
    <td id='34'> </td>
    <td id='35'> </td>
  </tr>
    <tr>
    <td id='36'> </td>
    <td id='37'> </td>
    <td id='38'> </td>
    <td id='39'> </td>
    <td id='40'> </td>
    <td id='41'> </td>
    <td id='42'> </td>
  </tr>
</table>

</body>

</html>

Christian J

May 17 2009, 12:44 PM

There's a problem with the number of days per month. All months get at least 31 days, some even more.

Also an ID can't begin with a number, it has to be a letter: http://www.w3.org/TR/html401/types.html#type-name you can workaround this by calling it say "x1" and then remove the "x" in the script as needed.

greymatt

Jun 8 2009, 10:16 AM

fom=newDate(cyear,cmonth-1,1);

should be;

fom=new Date(cyear,cmonth-1,1);

QUOTE(mathceleb @ May 16 2009, 09:16 PM)

I'm trying to create a dynamic table. The file is locatd here: http://www.barrycode.com/tester.php

Below is the code, and I'm getting an object error:

CODE

<?php include("bcmenu.php"); ?>

<html>
<head>
<title>Dynamic Table</title>

<script>
var DEFAULT_WIDTH = 200;
var DEFAULT_HEIGHT = 200;

function lday(month,year)
{
var dd = new Date(year, month, 0);
return dd.getDate();
}

function CreateTable(cmonth, cyear, srcHolder)
{
prev_year = cyear;
next_year = cyear;
prev_month = cmonth-1;
next_month = cmonth+1;
if (prev_month == 0 )
{
prev_month = 12;
prev_year = cyear - 1;
}
if (next_month == 13 )
{
next_month = 1;
next_year = cyear + 1;
}

srcHolder.innerHTML = "";
var srcTable = document.createElement("table");
srcTable.border = 1;
srcTable.borderColor = "Black";
srcTable.height = DEFAULT_HEIGHT;
srcTable.width = DEFAULT_WIDTH;
// srcTable.align = "center";
var tmpRow = null;
var tmpCell = null;
srcHolder.appendChild(srcTable);
x=new Date();
maxday=lday(cmonth,cyear);
fom=new Date(cyear,cmonth-1,1);
startday=fom.getDay();
alert(startday);
for(i=0; i<(maxday+startday); i++)
{
targday=i-startday+1;
if((i % 7) == 0 ) {tmpRow = srcTable.insertRow();}

tmpCell = tmpRow.insertCell();
tmpCell.innerText = targday;
tmpCell = null;
if((i % 7) == 6 ) {tmpRow = null;}
}

}
</script>

</head>

<body onload="CreateTable(5,2009,divHolder)">

<div id=divHolder>

</div>

</body>
</html>

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.