appendChild im IE geht nicht (HTML, CSS und Javascript)

[thread]10323[/thread]

appendChild im IE geht nicht

Danwe

2007-09-04 13:16

User since
2006-06-09
76 Artikel
BenutzerIn
[default_avatar]

Hi,

ich versuche gerade einfach ein <a> per JavaScript im DOm einzufügen. Im FF funktioniert alles problemlos, der IE höhrt immer auf wenn ich .appendChild() aufrufe. Hier mal mein Code:

Code: (dl )

var daysRow = right.document.getElementById("Num");
var todayCell = daysRow.getElementsByTagName("td")[todaysDay-1];

//Anker erstellen u. anhängen:
var newAnker = document.createElement("a");  
var newAnkerText = document.createTextNode("TestText");

alert(todayCell);  //Gibt im FF "[Object HtmlTableCellElement]" und im IE "[Object]" aus.

todayCell.appendChild(newAnker);  //Anker für aktuellen Tag setzen //Hier stoppt der IE, FF macht weiter
newAnker.appendChild(newAnkerText);

Ich verstehs einfach nicht, das ganze habe ich so aufgebaut wie ichs bei SelfHTML gefunden habe:
http://de.selfhtml.org/javascript/objekte/node.htm...

Struppi

2007-09-04 14:02

User since
2006-02-17
628 Artikel
BenutzerIn

Was ergibt:

Code: (dl )

1
2
3

alert(
todayCell.tagName + '\nHTML:' + todayCell.innerHTML
);

Danwe

2007-09-04 14:25

User since
2006-06-09
76 Artikel
BenutzerIn
[default_avatar]

Das gibt in FF und IE6 identisch:

Code: (dl )

1
2

TD
HTML: 4

aus. "4" ist der Text in der Zelle, das ganze ist ne Jahrestabelle u. heute ist der vierte September, also soweit scheint wohl wirklich alles identisch zu laufen.

Struppi

2007-09-04 15:18

User since
2006-02-17
628 Artikel
BenutzerIn

und die Tabelle existiert bereits oder ist ebenfalls dynamisch?

Danwe

2007-09-04 16:00

User since
2006-06-09
76 Artikel
BenutzerIn
[default_avatar]

Die Tabelle existiert bereits, hat auch einen <tbody> da der IE ja ohne ab u. zu mal Probleme hat.

Ich habe ein Array mit der Anzahl an Tagen jedes Monats, die zähle ich zusammen bis zum aktuellen Tag u. greife dann auf diese Zelle zu, so finde ich die Zelle. Und mit dem Code den ich hier genannt habe möchte ich dem Text in dieser Zelle einen Anker zuweisen, anschließend springe ich zu diesem Anker u. man sieht die Spalte für den aktuellen Tag.
im FF funktioniert das alles super, nur der IE will nicht.

Struppi

2007-09-04 16:24

User since
2006-02-17
628 Artikel
BenutzerIn

Ich hab hier nur den IE 7 da funktioniert dein Code problemslos.

Danwe

2007-09-04 17:54

User since
2006-06-09
76 Artikel
BenutzerIn
[default_avatar]

Im IE7 habe ichs auch ausprobier, funktioniert leider auch nicht :-(
Dann liegts wohl nicht am Skript sondern an etwas anderem. Aber ich habe keine Idee an was, die Tabelle kanns ja nicht sein, habe keinen Fehler entdeckt u. außerdem wird ja auch das richtige td-Element gefunden.

Struppi

2007-09-04 18:18

User since
2006-02-17
628 Artikel
BenutzerIn

Ich weiß es auch nicht, vielleicht zeigt's du mal etwas Code?

Danwe

2007-09-04 18:42

User since
2006-06-09
76 Artikel
BenutzerIn
[default_avatar]

Na, gut, dann poste ich mal die gesammte Haupt-JS-Funktion:

Code: (dl )

function ZeitAuswertung()
{
    //right.document.getElementById("Babel").


  var d = new Date();
  var dmonth = d.getMonth();
  var todaysDay = 0;
  
  var monate=new Array
  ("Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember");
  var monateTage=new Array
  (31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 );
  if((d.getFullYear() % 4) == 0)
    monateTage[1]++; //Schaltjahr, Februar +1 Tag
  
  //Heutigen Tag berechnen:
  for(i=0; i < d.getMonth(); i++)
  {
    todaysDay += monateTage[i];
  }
  todaysDay += d.getDate();
  //-------------------------
  
  //Aktuellen Tag farblich markieren u. Anker hinzufügen:
  var daysRow = right.document.getElementById("Num");
  var todayCell = daysRow.getElementsByTagName("td")[todaysDay-1];
  todayCell.className = "ActiveDay";
  
  //Anker erstellen:
  var newAnker = document.createElement("a");  
  var newAnkerName = document.createAttribute("Name");
  newAnker.name = "Today";  //Ankername "Today"
    
  //alert(todayCell.tagName + '\nHTML:' + todayCell.innerHTML);
  
  todayCell.appendChild(newAnker);  //Anker für aktuellen Tag setzen
  
  daysRow = right.document.getElementById("WT");
  todayCell = daysRow.getElementsByTagName("td")[todaysDay-1];
  todayCell.className = "ActiveDay";
  
  
  
  //right.document.getElementsByName(monate[dmonth])[0].className = "ActiveDay";
  //-------------------------
    
  //Zum Tag springen:
  right.scrollTo(99999999, 0);  //Gaaaaanz nach rechts scrollen damit dann von hinten zum Anker gesprungen werden kann    
  window.right.location.href=('DatenTabelle.html#' + 'Today');  //Den aktuellen Tag anspringen
  
  if (d.getMonth()+1 < 11)  //Wenn NICHT Dezember (Dezember ist auf Bildschirm ganz links)
  {    
    right.scrollTo(right.pageXOffset - right.innerWidth/2 + innerWidth/7, 0);   //So springen dass aktueller Tag zentriert auf Bildschirm sichtbar
  }
  else if (d.getDate() < 17)    // ab dem 17. Dezember ist letzter Tag im Jahr auf Bildschirm sichtbar
  {
    right.scrollTo(right.pageXOffset - right.innerWidth / 4, 0);
  }
  
  //-------------------------
  
  
  //alert("Ok");
}

Die Tabelle an sich steht in einem Frameset, oben stehen die Tage u. Monate des Jahres u. Links stehen 20 Namen, in den Zellen Stehen kurze Infos. das Linke Frame ist die Tabelle mit den Namen u. die Rechte ist die mit den ganzen Tagen, also eine sehr kleine u. eine 400kb große Tabelle.

also ein Ausschnitt aus der großen, in der auch das JS arbeitet. Das Frame heist "right", wie man im JS schon erahnen kann:

Code: (dl )

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html>
<head>
	<script src='functions.js'  type='text/javascript'></script>
	<link rel='stylesheet' href='styles.css' type='text/css' />
</head>
<body onScroll='parent.scrollen()'>
	<table id='DatenTabelle' border='0' cellpadding='3' cellspacing='0'><tbody>
<tr class='week' id='KW'>
	<td style='background-color: #78AABE' colspan='7'>1</td>
	<td style='background-color: #78AABE' colspan='7'>2</td>
	<td style='background-color: #78AABE' colspan='7'>3</td>

usw. usw.... (die Kalenderwochen...), mit colspan natürlich.

Code: (dl )

1
2
3

	<td style='background-color: #78AABE' colspan='7'>52</td>
	<td style='background-color: #78AABE'>1</td>
</tr>

Dann folgen untendrunter 12 Monats-colspans. Anschließend 2 Reihen, die jeweils eine Zelle pro Tag im Jahr haben, einmal für Wochentag-Namen u. einmal Datums-ziffer.
Anschließend kommen die ganzen Personen-Reihen:

Code: (dl )

<tr id='Mr. XYZ'>
	<td style='background-color: #FFCC99'></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td style='background-color: #FFCC99'></td>
	<td style='background-color: #FFCC99'></td>
	<td class='week' style='background-color: #B3A9CF' title='Berufsschule'>BS</td>
	<td style='background-color: #B3A9CF' title='Dies und das'>BS</td>
	<td style='background-color: #B3A9CF' title='Dies und das'>BS</td>
	<td style='background-color: #B3A9CF' title='Dies und das'>BS</td>
	<td style='background-color: #B3A9CF' title='Dies und das'>BS</td>
	<td style='background-color: #FFCC99'></td>

was abgeschlossen wird mit einem </tr>:

Code: (dl )

1
2
3

	<td style='background-color: #FFCC99'></td>
	<td class='week' style='background-color: #CDCDCD'></td>
</tr>

Ganz am Ende folgt dann das

Code: (dl )

</tbody></table></body></html>

Das war die Daten-Tabelle.

Hier noch das Frameset:

Code: (dl )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">

<html>
<head>
  <script src="functions.js"  type="text/javascript"></script>
  <title>Einsatztabelle 2008</title>
</head>

  <frameset rows="40,*,50" frameborder="0" framespacing="0" border="0">

    <frame src="Monatauswahl.html" name="top" scrolling="no" marginwidth="0" marginheight="0"/>

    <frameset cols="100,*" frameborder="0" framespacing="0" border="0">
      
      <frameset rows="*,17" frameborder="0" framespacing="0" border="0">
        <frame src="BezeichnungsSpalte.html" name="left" scrolling="no" marginwidth="0" marginheight="0" />
        <frame src="void.html" name="void" scrolling="no" marginwidth="0" marginheight="0" />
      </frameset>
          
      <frame onLoad="ZeitAuswertung()" src="DatenTabelle.html" name="right" marginwidth="0" marginheight="0" noresize frameborder="0" />
      
    </frameset>

    <frame src="Legende.html" name="bottom" scrolling="no" marginwidth="0" marginheight="0">

  </frameset>
    
</html>

Struppi

2007-09-04 23:03

User since
2006-02-17
628 Artikel
BenutzerIn

und daraus soll man sich jetzt was zusammen basteln?
Ich dacht eher an ein Code mit dem man testen kann oder einer Beispielseite.

Wird eigentlich ein Fehler gemeldet?
Du weißt wo du die Fehlermedlungen im IE findest?

View all threads created 2007-09-04 13:16.