nicht angemeldet
HTML-Code mit JavaScript dynamisch austauschen (und anzeigen)
Hallo !
Ich versuche gerade, die Eingabe eines Datums mit Hilfe eines Kalendertools zu realisieren. Und zwar soll eine Tabelle, die alle Tage eines gewählten Monats enthält, nach einem Mausklick (Buttons: Vorheriger Monat, Nächster Monat) ausgetauscht werden.
Zu diesem Zweck generiere ich den entsprechenden HTML-Code per JavaScript und möchte ihn nun mit "document.getElementById("calendar").appendChild(rows[i])" anzeigen. Leider klappt das nicht. Da keine Fehlermeldung erscheint, vermute ich, daß der Code zwar gewissermaßen "intern" schon geschrieben wird, aber die Anzeige nicht aktualisiert wird.
Für Hilfestellung jeglicher Art wäre ich sehr dankbar.
Für alle, die es interessiert, hier der bisher produzierte Code:
--- JavaScript in separater Datei ------------------------------
function displayCalendar(month, year) {
calendarPage(month, year);
for(i=0;i<rows.length;i++) {
document.getElementById("calendar").appendChild(rows[i]);
}
}
function calendarPage(month, year) {
rows = new Array();
currentWeek = -1;
days = daysForDisplay(month, year);
currentDayOWeek = 1;
isCurrentMonth = false;
for(i=0;i<days.length;i++) {
// determine if month is current month
if(days[i] == 1) isCurrentMonth = !isCurrentMonth;
// begin new week
if(currentDayOWeek == 1) {
currentWeek++;
rows[currentWeek] = document.createElement("tr");
}
// create new td tag for current day
currentDay = document.createElement("td");
// create new class attribute for td tag of current day
currentClass = document.createAttribute("class");
// set the class attribute
if(isCurrentMonth) currentClass.nodeValue = "currentMonth";
else currentClass.nodeValue = "otherMonth";
currentDay.setAttributeNode(currentClass);
// insert number of current day
currentNumber = document.createTextNode(days[i]);
currentDay.appendChild(currentNumber);
// add current day to week
rows[currentWeek].appendChild(currentDay);
// determine next day of the week
if(currentDayOWeek == 7) currentDayOWeek = 1;
else currentDayOWeek++;
}
return rows;
}
function daysForDisplay(month, year) {
daysForDisplay = new Array();
// get number of days displayed belonging to the previous month
firstDayOMonth = new Date(year, month - 1, 1);
numPreviousDays = getDayOWeek(firstDayOMonth) - 1;
// if there are days belonging to the previous month which shall be displayed
if(numPreviousDays > 0) {
// get previous month
if(month == 1) {
previousMonth = 12;
previousYear = year - 1;
}
else {
previousMonth = month - 1;
previousYear = year;
}
// get number of days of the previous month
daysOPreviousMonth = daysOMonth(previousMonth, previousYear);
// loop through days of previous month in order to add them to the array of displayed days
for(i=daysOPreviousMonth-numPreviousDays+1;i<=daysOPreviousMonth;i++) daysForDisplay.push(i);
}
// get number of days of this month
daysOMonth = daysOMonth(month, year);
// loop through days of this month in order to add them to the array of displayed days
for(i=1;i<=daysOMonth;i++) daysForDisplay.push(i);
// get number of days displayed belonging to the next month
lastDayOMonth = new Date(year, month - 1, daysOMonth);
numNextDays = 7 - getDayOWeek(lastDayOMonth);
// loop through days of the next month in order to add them to the array of displayed days
for(i=1;i<=numNextDays;i++) daysForDisplay.push(i);
return daysForDisplay;
}
function getDayOWeek(date) {
day = date.getDay();
if(day == 0) return 7;
else return day;
}
function isLeapYear(year) {
if(year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) return true;
else return false;
}
function daysOMonth(month, year) {
days = new Array(0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
if(month != 2) return days[month];
else {
if(isLeapYear(year)) return 29;
else return days[month];
}
}
--- Die HTML-Datei -----------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="calendar.js" type="text/javascript"></script>
</head>
<body onload="displayCalendar(4, 2004)">
<p>Datum:<br>
<table border="1" cellspacing="0" class="calendar" id="calendar"></table></p>
</body></html>
-
Hallo,
Zu diesem Zweck generiere ich den entsprechenden HTML-Code per JavaScript und möchte ihn nun mit "document.getElementById("calendar").appendChild(rows[i])" anzeigen. Leider klappt das nicht. Da keine Fehlermeldung erscheint, vermute ich, daß der Code zwar gewissermaßen "intern" schon geschrieben wird, aber die Anzeige nicht aktualisiert wird.
Wirklich helfen kann ich dir nicht, aber das pasiert nur im IE im Mozilla wird der Kalander angezeigt.
Und dass es intern tatsächlich exsistiert kannst du überprüfen:
function displayCalendar(month, year) {
calendarPage(month, year);
for(i=0;i<rows.length;i++) {
document.getElementById("calendar").appendChild(rows[i]);
}
alert(document.getElementById("calendar").innerHTML);
}Vielleicht versucht du es im IE mit innerHTML das ganze zu schreiben.
Grüße
Thomas-
Hi,
Vielleicht versucht du es im IE mit innerHTML das ganze zu schreiben.
... was auch auf Mozilla, Konqueror, Safari, Opera (OK, bis auf ein paar kleine, hier aber irrelevante Bugs), ... funktionieren würde.
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Danke für die Vorschläge !
(Hatte leider bisher keine Zeit, das auszuprobieren.)
Viele Grüße,
trinita
-
-
-
FsmE,
--- JavaScript in separater Datei ------------------------------
function displayCalendar(month, year) {
calendarPage(month, year);
for(i=0;i<rows.length;i++) {
document.getElementById("calendar").appendChild(rows[i]);
}
}Nur so mal blind getippt. Wie wärs mit:
document.getElementById("calendar").appendChild(document.createTextNode(rows[i]));
In sensibus mistis,
HaThoV--
Besuchen Sie http://www.4html.de, wenn Sie an einer
Neuen Generation von Web-Publishing mitarbeiten wollen.