Thomas: DOM - Tabelleninhalt auslesen. Klappt nicht im IE?!?!

SELF-Forum

DOM - Tabelleninhalt auslesen. Klappt nicht im IE?!?!

Thomas
– Informationen zu den Bewertungsregeln

Hallo,

ich habe mir ein JavaScript geschrieben, was mit bestimmte Zellen einer Tabelle auslesen kann.

Das Funktioniert folgendermaßen:

die tabelle muss th und td tags besitzen.
zum auslesen des wertes muss die funktion getValueOf("Test2",2) aufgerufen werden.
der 1. parameter sucht nach der spalte mit dem th-inhalt "Test2". in der beispielseite ist das die letzte spalte. der 2. parameter sagt welche zeile ausgelesen werden soll. in unserem fall die 2. bei der zeilenanzahl wird der header nicht mitberücksichtigt.
und schon haben wir unsere kordinaten mit denen die gesuchte zelle ausgelesen werden kann.

leider funktioniert das ganze nur im firefox. habe aber keine ahnung woran das liegt, kann mir vielleicht einer sagen was ich falsch mache??

<html>  
<head></head>  
<body>  
  
<table border>  
 <tr>  
  <th>Test</th>  
  <th>Neu</th>  
  <th>Test2</th>  
 </tr>  
 <tr>  
  <td>1-1</td>  
  <td>1-2</td>  
  <td>1-3</td>  
 </tr>  
 <tr>  
  <td>2-1</td>  
  <td>2-2</td>  
  <td>2-3</td>  
 </tr>  
 <tr>  
  <td>3-1</td>  
  <td>3-2</td>  
  <td>3-3</td>  
 </tr>  
</table>  
  
  
<script type="text/javascript">  
<!--  
  
  
function getHeader(search)  
{  
  var count= 0;  
  
  var header= document.getElementsByTagName("th")[0];  
  
  
  
  while(header)  
  {  
    if(header.tagName == "TH" )  
    {  
      count++;  
      if(header.firstChild.data == search)  
      {  
          break;  
      }  
    }  
    header= header.nextSibling;  
  }  
  return count;  
}  
  
  
function getValue(zeilen, position)  
{  
  var header= document.getElementsByTagName("th")[0].parentNode;  
  
  for(var i=0; i<zeilen; i++)  
  {  
    do  
    {  
       header= header.nextSibling;  
    }  
    while(header.tagName != "TR");  
  }  
  
  header= header.firstChild;  
  
  for(var i=0; i<position; )  
  {  
    if(header.tagName != "TD" )  
    {  
      i++;  
    }  
    header= header.nextSibling;  
  }  
  
  
  return header.firstChild.data;  
  
}  
  
  
function getValueOf(header,zeile)  
{  
  return getValue(zeile,getHeader(header));  
}  
  
  
  
alert(getValueOf("Test2",2));  
  
  
-->  
</script>  
  
  
  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. DOM - Tabelleninhalt auslesen. Klappt nicht im IE?!?!

    Andreas Dölling
    – Informationen zu den Bewertungsregeln

    Hallo,

    soweit ich das sehe, hängt der Fehler im IE damit zusammen, daß er den DOM-Baum zum Zeitpunkt, wo das Script ausgeführt wird, noch nicht komplett geladen hat.
    Ich habe Deinen Code mal so umgebaut, daß das Javascript im HTML-Head steht und erst bei onload aufgerufen wird.

    Außerdem habe ich mir mal erlaubt, Deine Funktion getValue() ein wenig zu straffen (s.u.).
    ;)

    So klappt es bei mir auch im IE.

    Übrigens: sollte Dir onload nicht passen, weil dieses Ereignis zu spät gefeuert wird, dann schau mal unter http://www.zelph.com/archives/2005/03/31/introducing-ondomload/.

    Ciao,
    Andreas

    <html>
    <head>

    <script type="text/javascript">
    <!--

    function getHeader(search)
    {
      var count= 0;
      var header= document.getElementsByTagName("th")[0];

    while(header)
      {
        if(header.tagName == "TH" )
        {
          count++;
          if(header.firstChild.data == search)
          {
              break;
          }
        }
        header= header.nextSibling;
      }
      return count;
    }

    function getValue(zeilen, position)
    {
      var row = document.getElementsByTagName('TR')[zeilen];
      var cell = row.getElementsByTagName('TD')[position-1];
      return cell.firstChild.data;

    }

    function getValueOf(header,zeile)
    {
      return getValue(zeile,getHeader(header));
    }

    -->
    </script>

    </head>
    <body onload="alert(getValueOf('Test2',2));">

    <table border>
     <tr>
      <th>Test</th>
      <th>Neu</th>
      <th>Test2</th>
     </tr>
     <tr>
      <td>1-1</td>
      <td>1-2</td>
      <td>1-3</td>
     </tr>
     <tr>
      <td>2-1</td>
      <td>2-2</td>
      <td>2-3</td>
     </tr>
     <tr>
      <td>3-1</td>
      <td>3-2</td>
      <td>3-3</td>
     </tr>
    </table>
    </body>
    </html>

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. DOM - Tabelleninhalt auslesen. Klappt nicht im IE?!?!

    JürgenB Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Thomas,

    der Zugriff über die Knoten (firstChild...) ist nicht zu empfehlen, da Leerzeichen und Zeilenumbrüche zwischen den Tags auch als Knoten interpretiert werden - und leider nicht von allen Browsern gleich. Ich greife daher auf Tabellenfelder so zu:

      
 var tab=document.getElementById(TabId);  
 var tbdy=tab.getElementsByTagName("tbody")[0];  
 var tz=tbdy.getElementsByTagName("tr");  
 var nzeilen=tz.length;  
 var nspalten=tz[0].getElementsByTagName("td").length;  
  
   for(var z=0;z<nzeilen;z++) {  
    var zeile=tz[z].getElementsByTagName("td");  
    Arr[z]=new Array(nspalten);  
    for(var s=0;s<nspalten;s++)  
//     Arr[z][s]=zeile[s].firstChild.nodeValue;  
     Arr[z][s]=zeile[s].innerHTML;  
   }  
  
  for(var z=0;z<nzeilen;z++) {  
   var zeile=tz[z].getElementsByTagName("td");  
   for(var s=0;s<nspalten;s++) {  
//    zeile[s].firstChild.nodeValue=Arr[z][s];  
    zeile[s].innerHTML=""; // für den MAC-IE  
    zeile[s].innerHTML=Arr[z][s];  
   }  
  }

    siehe auch http://www.j-berkemeier.de/TableSort.html

    Das sollte sich Problemlos auch auf Kopf- und Fußzeilen erweitern lassen. Die Tabelle darf bei diesem Algorithmus aber keine colspan und rowspan enthalten. Ob besser firstChild.nodeValue oder innerHTML eingesetzt wird, hängt vom Inhalt der Tabellenfelder ab.

    Gruß, Jürgen

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln