Austausch von arrays zur Erezugung dynamischer Tabellen

  • Ich habe aus selfhtml das Beispiel einer dynamischen Tabelle gefunden (http://aktuell.de.selfhtml.org/artikel/javascript/tabellen-sortieren), die man sortieren kann. Jetzt möchte ich, dass das Array "Tabellendaten" durch eine Javascript-Funktion jeweils durch andere Arrays ersetzt (z.B. var DATA2=Tabellendaten) wird. Tabellenkopf und Anzahl der Elemente bleiben dabei gleich.

    Wie könnte die Funktion aussehen? Folgender Versuch war nicht erfolgreich:

    function getDATA1() {document.getElementByname("Tabellendaten").innerHTML = DATA1;}

    Vielen Dank für die Hilfe ;)
    Die Statistikanerin

  • also erstma, für so sachen jquery nutzen, damit is das wesentlich einfacher...^^
    evtl gibts da auch plugins, die sowas erledigen, dann muss man nich das rad neu erfinden.

    anaonsten is nen array ähnlich einer tabelle, also pro array-eintrag haste dann ein td in der tabelle (wenn die tabelle nur aus einer spalte und vielen zeilen besteht und das array ebenfalls eindimensional ist)

    das heisst du musst dir ne indizierung der tabelle schaffen, die du dannmit der vom array abgleichst und werte rein stopfst.

    __________________

    deine fehler oben:

    es is document.getElementsByName und nicht getElementByname, weil namen durchaus öfter vorkommen könnten.
    was du brauchst ist wahrscheinlich document.getElementById( hier kommt die id in hochkommata rein )
    dann gehst du da wahrscheinlich direkt auf die tabelle, machst du das, musst du dynamisch den gesamten html-teil der tabelle erzeugen.
    sprich alle tr und td, die schliessenden tags. etc

  • Vielen Dank fürs Mitdenken und die Hinweise. jquery habe ich bisher nur einfach genutzt als "Fertigprodukt" und mich nicht weiter damit auseinandergesetzt...
    Die Tabelle über id auszutauschen ist für mich keine Lösung, da für die dynamische Erzeugung der Tabellen zahlreiche Programmschritte durchlaufen werden, die müsste ich dann immer wieder generieren (ich sitze an einem Projekt mit geschätzten 50.000 Tabellen!!!). Ich brauche also ein Schnittstelle ganz vorne im Produktionsprozess...
    Aber dennoch, vielen Dank für die Anregungen.
    Die Statistikeranerin.

    Hier noch mal ein Auszug aus meinem Code, der leider nicht funktioniert :(

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <style type="text/css"> #Kopfbereich { position:absolute; top:20px; left:30px; } #Tabelle { position:absolute; top:100px; left:30px; } body { background-color:#FFFFFF; } h1,h2,h3,p,ul,ol,li,td,th { font-family:Arial,sans-serif; color:black; } h1 { font-size:24px; margin-top:4px; margin-bottom:4px; margin-left:6px; } p,ul,ol,li,td,th { font-size:13px; color:#000000; } th,td { padding:1px; } </style> <script type="text/javascript"> <!-- var DATA1 = new Array( "DATA1","28305","6793","32312", "DATA1","28746","4863","31285", "DATA1","29998","9466","30070" ); var DATA2 = new Array( "DATA2","2805","673","3232", "DATA2","2846","463","3185", "DATA2","2998","946","3000" ); var DATA3 = new Array( "DATA3","205","673","32", "DATA3","286","463","315", "DATA3","298","946","30" ); var Tabellendaten = DATA1 function getDATA1() {document.getElementByname("Tabellendaten").innerHTML = DATA1;} function getDATA2() {document.getElementByname("Tabellendaten").innerHTML = DATA2;} function getDATA3() {document.getElementByname("Tabellendaten").innerHTML = DATA3;} var sortierte_Tabellendaten = new Array(Tabellendaten.length); var Spaltenueberschriften = new Array( "Land", "Brutto-Inlands-produkt pro Einwohner (in Euro)", "Öffentliche Schulden pro Einwohner (in DM)", "Einkommen pro Einwohner 1999 (DM)" ); var Spalten = Spaltenueberschriften.length; var Zeilen = Tabellendaten.length / Spalten; var Spaltenueberschriftformatierungen = new Array( "width=\"250\" valign=\"top\" style=\"text-align:left; border:solid 1px #808080\"", "width=\"100\" valign=\"top\" style=\"text-align:right; border:solid 1px #808080\"", "width=\"100\" valign=\"top\" style=\"text-align:right; border:solid 1px #808080\"", "width=\"100\" valign=\"top\" style=\"text-align:right; border:solid 1px #808080\"" ); var Spaltenformatierungen = new Array( "width=\"250\" style=\"text-align:left; border:solid 1px #808080\"", "width=\"100\" style=\"font-family:Courier New,courier; text-align:right; border:solid 1px #808080\"", "width=\"100\" style=\"font-family:Courier New,courier; text-align:right; border:solid 1px #808080\"", "width=\"100\" style=\"font-family:Courier New,courier; text-align:right; border:solid 1px #808080\"" ); var Spaltensortierungen = new Array( "alphabetisch","numerisch","numerisch","numerisch" ); var Tabellenformatierung = "border=\"1\" style=\"border:solid 1px #808080\" cellspacing=\"0\""; var Ordinalzahlenspalte = 1; var Ordinalzahlenspaltenformatierung = "width=\"20\" style=\"border:solid 1px #808080\""; var IconNormalAuf = "<img src=\"normal_auf.gif\" width=\"14\" height=\"12\" border=\"0\" alt=\"\">"; var IconNormalAb = "<img src=\"normal_ab.gif\" width=\"14\" height=\"12\" border=\"0\" alt=\"\">"; var IconSortiertAuf = "<img src=\"sortiert_auf.gif\" width=\"14\" height=\"12\" border=\"0\" alt=\"\">"; var IconSortiertAb = "<img src=\"sortiert_ab.gif\" width=\"14\" height=\"12\" border=\"0\" alt=\"\">"; var Sortierzeile = ""; function Erzeuge_Sortierzeile(Nummer,Richtung) { Sortierzeile = "<tr>"; if(Ordinalzahlenspalte) Sortierzeile += "<th " + Ordinalzahlenspaltenformatierung + "> <\/th>"; for(var j = 0; j < Spalten; ++j) { Sortierzeile += "<th " + Spaltenformatierungen[j] + ">"; if(Richtung == "aufsteigend" && j == Nummer) { Sortierzeile += IconSortiertAuf + " "; Sortierzeile += "<a href=\"javascript:Sortiere_nach_Spalte(" + j + ",'" + Spaltensortierungen[j] + "','absteigend')\">" + IconNormalAb + "</a>"; } else if(Richtung == "absteigend" && j == Nummer) { Sortierzeile += "<a href=\"javascript:Sortiere_nach_Spalte(" + j + ",'" + Spaltensortierungen[j] + "','aufsteigend')\">" + IconNormalAuf + "</a>"; Sortierzeile += " " + IconSortiertAb; } else { Sortierzeile += "<a href=\"javascript:Sortiere_nach_Spalte(" + j + ",'" + Spaltensortierungen[j] + "','aufsteigend')\">" + IconNormalAuf + "</a> "; Sortierzeile += "<a href=\"javascript:Sortiere_nach_Spalte(" + j + ",'" + Spaltensortierungen[j] + "','absteigend')\">" + IconNormalAb + "</a><\/td>"; } Sortierzeile += "<\/th>"; } Sortierzeile += "<tr>"; } function Sortiere_nach_Spalte(Nummer,Art,Richtung) { var Spaltendaten = new Array(); var Vergleichsdaten = new Array(); var SortierIndex = new Array(); for(var i = 0; i < Zeilen; ++i) Spaltendaten[i] = Vergleichsdaten[i] = Tabellendaten[i * Spalten + Nummer]; if(Art == "alphabetisch") Spaltendaten.sort(); if(Art == "numerisch") Spaltendaten.sort(Numsort); if(Richtung == "absteigend") Spaltendaten.reverse(); for(i = 0; i < Zeilen; ++i) for(var j = 0; j < Zeilen; ++j) if(Spaltendaten[i] == Vergleichsdaten[j]) SortierIndex[i] = j; var Speicher; for(i = 0; i < Zeilen; ++i) for(j = 0; j < Spalten; ++j) sortierte_Tabellendaten[i * Spalten + j] = Tabellendaten[SortierIndex[i] * Spalten + j]; Erzeuge_Sortierzeile(Nummer,Richtung); Schreibe_Tabelle(sortierte_Tabellendaten); } function Schreibe_Tabelle(Array) { var Tabelleninhalt = ""; Tabelleninhalt += "<table " + Tabellenformatierung + ">"; Tabelleninhalt += "<thead><tr>"; if(Ordinalzahlenspalte) Tabelleninhalt += "<th " + Ordinalzahlenspaltenformatierung + "> <\/th>"; for(var j = 0; j < Spalten; ++j) Tabelleninhalt += "<th " + Spaltenueberschriftformatierungen[j] + ">" + Spaltenueberschriften[j] + "<\/th>"; Tabelleninhalt += "<\/tr>"; Tabelleninhalt += Sortierzeile; Tabelleninhalt += "<\/thead>"; Tabelleninhalt += "<tfoot><\/tfoot>"; Tabelleninhalt += "<tbody>"; for(var i = 0; i < Zeilen; ++i) { Tabelleninhalt += "<tr>"; if(Ordinalzahlenspalte) Tabelleninhalt += "<td " + Ordinalzahlenspaltenformatierung + ">" + (i+1) + ".<\/td>"; for(var j = 0; j < Spalten; ++j) Tabelleninhalt += "<td " + Spaltenformatierungen[j] + ">" + Array[i * Spalten + j] + "<\/td>"; Tabelleninhalt += "<\/tr>"; } Tabelleninhalt += "<\/tbody>"; Tabelleninhalt += "<\/table>"; if(document.getElementById) document.getElementById("Tabelle").innerHTML = Tabelleninhalt; else if(document.all) document.all.Tabelle.innerHTML = Tabelleninhalt; else if(document.layers) { document.Tabelle.document.open(); document.Tabelle.document.write(Tabelleninhalt); document.Tabelle.document.close(); } } function Numsort(a,b) { return a-b; } </script> <title>Tabelle</title> </head> <body onLoad="Erzeuge_Sortierzeile(-1,''); Schreibe_Tabelle(Tabellendaten);"> <div id="Kopfbereich"> <h1>Bundesländer im Vergleich</h1>
    <noscript> <p>Die Daten auf dieser Seite lassen sich nur mit JavaScript-fähigen Browsern und mit eingeschaltetem JavaScript anzeigen!</p> </noscript> </div> <button onclick="getDATA1();Erzeuge_Sortierzeile(-1,''); Schreibe_Tabelle(Tabellendaten);">Test</button> <button onclick="getDATA2();Erzeuge_Sortierzeile(-1,''); Schreibe_Tabelle(Tabellendaten);">Test</button> <button onclick="getDATA3();Erzeuge_Sortierzeile(-1,''); Schreibe_Tabelle(Tabellendaten);">Test</button> <br> <br> <div id="Tabelle"></div> </body> </html>