Tartalomjegyzék

Tantárgy:Webes rendszerek kliens oldali programozása 2. [IM3314, WP3316]
Tananyag:XML
Feladat:Könyvek összes adatának kiíratása
Kidolgozás:Feladat megoldása fejlesztési részfeladatok segítségével
Részfeladat:6. részfeladat

Részfeladat

Írassuk ki a táblázatot egy DIV elemben

Részfeladat megoldásának forrása

            // Táblázat kiíratása
            document.getElementById("tarol").innerHTML=sTablazat;
      <div id="tarol"></div>

Megoldás forráskódja

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Könyvek összes adatának kiíratása - 6</title>
      <meta name="author" content="Tóth Péter" />
      <meta name="copyright" content="© 2012, NYME SEK" />
      <meta http-equiv="date" content="2012-08-02" />
      <meta name="revised" content="Tóth Péter, 02/08/2012" />
      <meta name="description" content="XML - Könyvek összes adatának kiíratása" />
      <meta http-equiv="content-language" content="hu" />
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <script type="text/javascript">
         <!--
         // OnLoad
         function funcStart(){
            // XML kezelő objektum létrehozása
            if(window.XMLHttpRequest)
               xmlhttp=new XMLHttpRequest();
            else
               xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            // XML fájl betöltése
            xmlhttp.open("GET","konyvek.xml",false);
            xmlhttp.send();
            // Documentum fa felépítése
            var xmlDoc=xmlhttp.responseXML;
            // Könyv blokkok kiolvasása a fából
            var aKonyv=xmlDoc.getElementsByTagName("konyv");
            // Fejléc összegyűjtése
            var aFejlec=Array();
            for(j in aKonyv[0].childNodes)
               if(aKonyv[0].childNodes[j].nodeType)
                  if(aKonyv[0].childNodes[j].nodeType==1)
                     if(aKonyv[0].childNodes[j].nodeName)
                        // Csak akkor vesszük fel a listába, ha még nem létezik a fejlécek között
                        if(aFejlec.indexOf(aKonyv[0].childNodes[j].nodeName)==-1)
                           aFejlec.push(aKonyv[0].childNodes[j].nodeName);
            // Táblázat összeállításának megkezdése
            var sTablazat="<table>";
            // Fejléc összeállítása
            sTablazat+="<tr>";
            for(j in aFejlec)
               sTablazat+="<th>"+aFejlec[j]+"</th>";
            sTablazat+="</tr>";
            // Adatsorok összeállítása
            for(i in aKonyv)
               if(aKonyv[i].childNodes){
                  sTablazat+="<tr>";
                  for(j in aFejlec){
                     z=0;
                     while((z<aKonyv[i].childNodes.length-1)&&(aKonyv[i].childNodes[z].nodeName!=aFejlec[j]))
                        z++;
                     // Ha az adott blokkban van aktuális információ bejegyzés
                     if(aKonyv[i].childNodes[z].nodeName==aFejlec[j])
                        sTablazat+="<td>"+aKonyv[i].childNodes[z].firstChild.nodeValue+"</td>";
                     else // Ha nincs ilyen információ (ez jelenleg nem jön létre!)
                        sTablazat+="<td>&nbsp;</td>";
                     }
                  sTablazat+="</tr>";
                  }
            // Táblázat lezárása
            sTablazat+="</table>";
            // Táblázat kiíratása
            document.getElementById("tarol").innerHTML=sTablazat;
            }
         -->
      </script>
   </head>
   <body onload="funcStart()">
      <div id="tarol"></div>
   </body>
</html>