[HTML] Filtern/Selektieren

bigfoot996 · 09.02.2009, 12:37

Mahlzeit,

mal wieder ein Problem zur Mittagszeit *g*

Dieses mal recht einfach für jemanden der sich mit html auskennt denke ich:

Ich habe riesig viel quellcode mit gaaaanz ganz vielen Zeilen Text drin. Am Ende jeder Zeile gibt es 3 Optionen die dort stehen können: "AAA", "BBB" oder "CCC"

Nun will ich das automatisch sortieren lassen und zwar hab ich 3 divcontainer gebastelt - für jeden Buchstaben einen - in die der Jeweilige Text (verbunden durch "-") einsortiert werden soll.

Um es etwas zu veranschaulichen, wir haben quasi folgende Ausgangssituation:

Code:

[...]
blabla-blub-trallalalalalala-AAA
blabla-blubb-wasweisichwas-CCC
blabla-blubb-wasweisichwas-BBB
blabla-blub-trallalalalalliluliluala-AAA
[...]

und das is mein Teil was ich gebastelt hab:

Code:

<div style="padding: 3px; background-color: #ABCDE; border: 1px solid #d8d8d8; font-size: 1em;"><div style="text-transform: uppercase; border-bottom: 1px solid #E7E7E7; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;"><span onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerHTML = '<b>AA: </b><a href=\'#\' onClick=\'return false;\'>ausblenden</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<b>AAA: </b><a href=\'#\' onClick=\'return false;\'>anzeigen</a>'; }" /><b>AAA: </b><a href="#" onClick="return false;">anzeigen</a></span></div><div class="quotecontent"><div style="display: none;">blabla-blub-trallalalalalliluliluala-AAA <br><br>blabla-blub-trallalalalalliluliluala-AAA<br><br> blabla-blub-trallalalalalliluliluala-AAA</div></div></div>
<br

(am besten ihr speichert euch das kurz in editor als .html und guckt euch das an)

So, nun zum eigentlichen Problem: In mein riesen File werden automatisch ständig neue Einträge, alle mit der genannten Kennung, eingefügt (darum is das drecksding auch so groß und ich kanns nich handish machen...).

Ich will jetzt, dass ich 3 aufklappbare Reiter hab so wie ich einen oben schon gepostet hab und dort dann AUTOMATISCH durch die Funktion/den Code den ich suche einsortiert wird.

So, und wie man das macht hab ich nun ehrlich keine Ahnung, google konnte mir dazu auch nichts gutes sagen

So ne art "select from" + Einsortieren an die Richtige Stelle - hoffe ihr versteht was ich mein und irgendjemand kann mir helfen.

Grüße
bigfoot996

**Exit** · 09.02.2009, 20:50

Leider hast Du das extrem lausig beschrieben, und auch nirgendwo genannt, für was das am Ende gedacht ist.

Somit habe ich den Mist einfach mal zusammengeschludert

Code:

<html>
<head>
<script type="text/javascript">
var aItemsAAA = new Array();
var aItemsBBB = new Array();
var aItemsCCC = new Array();
ReadInput();
function ReadInput()
{
    var fso = new ActiveXObject("Scripting.FileSystemObject");
    var file = fso.GetFile('d:\\temp\\test_htm\\quellcode.txt');
    var stream = file.OpenAsTextStream();
    while(stream.AtEndOfLine == false)
    {
        var textline = stream.ReadLine();
        var Suche = /(AAA|BBB|CCC)$/g;
        var Ergebnis = textline.match(Suche);
        if (Ergebnis != false)
        {
            switch (Ergebnis[0])
            {
                case 'AAA':
                    aItemsAAA.push(textline);
                    break;
                case 'BBB':
                    aItemsBBB.push(textline);
                    break;
                case 'CCC':
                    aItemsCCC.push(textline);
                    break;
            }
        }
    }
}
</script>
</head>
<body>

<div style="padding: 3px; background-color: #ABCDE; border: 1px solid #d8d8d8; font-size: 1em;">
    <div style="text-transform: uppercase; border-bottom: 1px solid #E7E7E7; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;">
        <span onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') 
            {  
                this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; 
                this.innerHTML = '<b>AA: </b><a href=\'#\' onClick=\'return false;\'>ausblenden</a>'; 
            } 
            else 
            { 
                this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; 
                this.innerHTML = '<b>AAA: </b><a href=\'#\' onClick=\'return false;\'>anzeigen</a>'; 
            }" /><b>AAA: </b><a href="#" onClick="return false;">anzeigen</a>
        </span>
    </div>
    <div class="quotecontent">
        <div style="display: none;">
            <script type="text/javascript">
                for (var i=0; i<aItemsAAA.length; i++)
                {
                    document.write(aItemsAAA[i] + '<br><br>');
                }
            </script>
        </div>
    </div>
</div>
<div style="padding: 3px; background-color: #ABCDE; border: 1px solid #d8d8d8; font-size: 1em;">
    <div style="text-transform: uppercase; border-bottom: 1px solid #E7E7E7; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;">
        <span onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') 
            {  
                this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; 
                this.innerHTML = '<b>BB: </b><a href=\'#\' onClick=\'return false;\'>ausblenden</a>'; 
            } 
            else 
            { 
                this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; 
                this.innerHTML = '<b>BBB: </b><a href=\'#\' onClick=\'return false;\'>anzeigen</a>'; 
            }" /><b>BBB: </b><a href="#" onClick="return false;">anzeigen</a>
        </span>
    </div>
    <div class="quotecontent">
        <div style="display: none;">
            <script type="text/javascript">
                for (var i=0; i<aItemsBBB.length; i++)
                {
                    document.write(aItemsBBB[i] + '<br><br>');
                }
            </script>
        </div>
    </div>
</div>
<div style="padding: 3px; background-color: #ABCDE; border: 1px solid #d8d8d8; font-size: 1em;">
    <div style="text-transform: uppercase; border-bottom: 1px solid #E7E7E7; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;">
        <span onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') 
            {  
                this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; 
                this.innerHTML = '<b>CC: </b><a href=\'#\' onClick=\'return false;\'>ausblenden</a>'; 
            } 
            else 
            { 
                this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; 
                this.innerHTML = '<b>CCC: </b><a href=\'#\' onClick=\'return false;\'>anzeigen</a>'; 
            }" /><b>CCC: </b><a href="#" onClick="return false;">anzeigen</a>
        </span>
    </div>
    <div class="quotecontent">
        <div style="display: none;">
            <script type="text/javascript">
                for (var i=0; i<aItemsCCC.length; i++)
                {
                    document.write(aItemsCCC[i] + '<br><br>');
                }
            </script>
        </div>
    </div>
</div>

</body>
</html>

Mit folgender Testquellcode Datei: (Du hast net gesagt, wie der Quellcode vorliegt - ich habe aber mal eine Datei angenommen.)

Code:

AAA Inhalt1-AAA
CCC Inhalt1-CCC
BBB Inhalt1-BBB
AAA Inhalt2-AAA
AAA Inhalt3-AAA
AAA Inhalt4-AAA
BBB Inhalt2-BBB
CCC Inhalt2-CCC
CCC Inhalt3-CCC
CCC Inhalt4-CCC

Funktionieren tut der Mist - aber ordentliche Programmierung ist was anderes.

Du must den "Quellcode" in einer Datei ablegen, und dann musste die Zeile: "var file = fso.GetFile('d:\\temp\\test_htm\\quellcode.txt');" anpassen, damit es zu Deinem Pfad zur Datei passt. Achtung die doppelten Backslash sind Pflicht.

Viel Spass damit

PS: das hat fast nix mehr mit HTML zu tun - sondern ist vielmehr Javascript.

bigfoot996 · 10.02.2009, 07:21

Hehe mag sein tut mir leid - ich kann den ganzen ******* auch nicht mehr sehen...

Dass ich es nich ausführlich beschreiben kann liegt daran, dass es ein riesen wirrwarr voller komischer Sachen is...oder hast du schonmal über ne ASP Seite aus ner DB Sachen abholen lassen um sie dann in ne statische HTML page zu importieren und die alle 3 Minuten erneuern zulassen, anstatt nen direkten zugriff auf den Server einzurichten für sowas? *g*

Vielen Dank schonmal für das obrige, ich werd mich im Laufe des Tages da mal etwas einlesen und schauen ob/was ich daraus verwenden kann, danke

Ich versuchs nochmal etwas genauer zu erklären:

Ich habe eine einzige Datei, eine riesige html Datei mit hunderten von Zeilen Text (Text, kein Code). Über die oben genannte ASP Page kommen ständig neue Textzeilen dazu, aber ich kann der asp page sagen sie soll immer nen bestimmtes Kürzel ans Ende jeder Zeile hängen - wie in unserem Fall zur Bestimmung der Priorität (A B C oder Red Alert, ist für unsere Server Überwachungskonsole)

So, da in dieser Konsole mittlerweile weit über 100 Server drin hängen wird das ganze unübersichtlich wenn man nich grad nen 52" Plasma an der Wand hängen hat wo man alles draufwerfen kann

Darum wollen wir das jetzt etwas sortieren - und zwar nach Prio. Wenn man nur mal mein selber zusammengefrickeltes Zeugs als html speichert dann hat man schonmal die Funktion welche wir haben vollen, dieses auf/zu klappen. Nun soll durch ein Javascript oder weis der Kuckuck wie man das sonst noch lösen kann, die neuen Zeilen die in die Datei kommen automatisch nach ihrem Kürzel am Ende sortiert werden. D.h. es gibt 3 von meinen Divcontainern, oder sagen wir 4 - in einem auf/zu klappteil sind alle PrioA Server drin, im anderen die PrioB, im andern C und im letzten RedAltert.

So, ich hoffe nun ists wenigstens etwas verständlicher exit? *g*

Grüße
biggi

P.S. Achso und falls das immer noch nicht klar ist: Der zu sortierende Text ist in der gleichen Datei (index.html

) wo das JScript später rein soll um es in dieser zu sortieren.

EDIT: Boah das is alles noch viel komplizierter als ich es selber geglaubt hab....also hier mal ein original auszug ausm quelltext, bringt ja doch nix sonst...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
  <TITLE>Web Diagnostic xxxxx</TITLE>
  <META http-equiv=Content-Type content="text/html; charset=utf-8">
  <META http-equiv="refresh" content="120; index.asp">
  <META http-equiv="expires" content="0">
<LINK href="templates/tabular-table.css" type="text/css" rel="StyleSheet">
<!--  <LINK href="tabular-table.css" type=text/css rel=StyleSheet>!-->
</HEAD>

<BODY>
<TABLE summary="Submitted table designs" width="100%">
  <CAPTION>Web Diagnostic xxxxxxxxx</CAPTION>
  <TFOOT>
    <TR>
      <TH scope=row>&nbsp;</TH>
      <TD colSpan=13>Total xxxxxx Watch Items - xxxxxxxx</TD>
    </TR>
  </TFOOT>
  <TBODY>

    
    <TR class='odd'>
      <TH scope=row><A href="http://rb-eworkslubos.de.bosch.com/eWorksBVE/frame.asp" target="_blank" title="eWorks Procurement_P_Prio-A">blablablaProcurement_P_Prio-A</A></TH>
      <TD><img src="http://www.tweakpc.de/forum/images/gruen.gif" class="imgalarm"></TD>
      <TD>0s</TD>
      <!--<TD>Active</TD>-->
      <!--<TD>0</TD>
      <TD>200</TD>-->
      <TD><A title="Doc" href="*PFAD*" target="_blank"><img src="http://www.tweakpc.de/forum/images/folder.gif"></A></TD>
    <td>&nbsp;</td>

      <TH scope=row><A href="*IP*" target="_blank" title="FTP_P_Prio-A">FTP_blablabla_P_Prio-A</A></TH>
      <TD><img src="http://www.tweakpc.de/forum/images/gruen.gif" class="imgalarm"></TD>
      <TD>0s</TD>
      <!--<TD>Active </TD>-->
      <!--<<TD>0</TD>
      TD>&nbsp;</TD>-->
      <TD><A title="Doc" href="*PFAD*"_blank"><img src="http://www.tweakpc.de/forum/images/folder.gif"></A></TD>
       <td>&nbsp;</td>

      <TH scope=row><A href="*URL*" target="_blank" title="GSA_S_GSA Cold Standby_P_Prio-B">GSA_blablabla_GSA Cold Standby_P_Pr... </A></TH>
      <TD><img src="http://www.tweakpc.de/forum/images/gruen.gif" class="imgalarm"></TD>
      <TD>0s</TD>
      <!--<TD>Active</TD>-->
      <!--<TD>0</TD>
      <TD>200</TD>-->
      <TD><A title="Doc" href="*PFAD*"_blank"><img src="http://www.tweakpc.de/forum/images/folder.gif"></A></TD>
    </TR>
    
    <TR >
      <TH scope=row><A href="*PFAD*"_blank" title="GSA_blablabla_P_Prio-A">GSA_blablabla_P_Prio-A</A></TH>
      <TD><img src="http://www.tweakpc.de/forum/images/gruen.gif" class="imgalarm"></TD>
      <TD>0s</TD>
      <!--<TD>Active</TD>-->
      <!--<TD>0</TD>
      <TD>200</TD>-->
      <TD><A title="Doc" href="*PFAD*"_blank"><img src="http://www.tweakpc.de/forum/images/folder.gif"></A></TD>
    <td>&nbsp;</td>

      <TH scope=row><A href="WTFWTFOMG-.-" title="GSA__GSA blablabla">GSA_blablabla_GSA Live_P_Prio-B</A></TH>
      <TD><img src="http://www.tweakpc.de/forum/images/gruen.gif" class="imgalarm"></TD>
      <TD>0s</TD>
      <!--<TD>Active </TD>-->
      <!--<<TD>0</TD>
      TD>200</TD>-->
      <TD><A title="Doc" href="gerhtrjtukethwe"><img src="http://www.tweakpc.de/forum/images/folder.gif"></A></TD>
       <td>&nbsp;</td>

      <TH scope=row><A href="gregege" target="_blank" title="IIS_gergegegr_P_Prio-A">gegegegegegegP_Prio-A</A></TH>
      <TD><img src="http://www.tweakpc.de/forum/images/gruen.gif" class="imgalarm"></TD>
      <TD>3s</TD>
      <!--<TD>Active</TD>-->
      <!--<TD>0</TD>
      <TD>200</TD>-->
      <TD><A title="Doc" href="gergegegr"_blank"><img src="http://www.tweakpc.de/forum/images/folder.gif"></A></TD>
    </TR>

Wahnsinnig geil oder? Ich checks auf jeden Fall gar nich mehr grad....

**Exit** · 10.02.2009, 07:50

Hm - ja ich habe schon recht viel mit ASP und auch ASP.NET gemacht.

Seit Ihr Euch sicher, dass ihr dass wirklich alles Clientseitig per Javascript machen wollt? Weil zum Aufruf der Seite müssen die Daten alle komplett an den Client geschickt werden, und wenn da schon ein paar Megabyte an Text drin stehen, wird das unter Umständen recht lahm.

Wo steckt denn der ganze Text (Quellcode) in der HTML Datei? Wo packt die ASP Seite das hin?

In meinen Augen wäre es schlüssiger, wenn das in eine extra Datei (wie meine Quellcode.txt) abgelegt wird. Und die HTML Seite wird doch dynamisch per ASP (oder besser noch ASP.NET) zusammen gebaut. Die Performance wird dabei sicher deutlich besser, wenn immer nur ein drittel (oder gar ein Viertel) des Quelltextes übertragen werden muss.

Unter ASP.NET könnte man dann zusätzlich noch mit Caching arbeiten, wenn der Server das verkraftet.

bigfoot996 · 10.02.2009, 07:56

Hehe das is ja grad der springende Punkt Exit, es GEHT leider nicht anders, und jetzt fragt nicht wieso. Ich sag doch das is hier alles ein mortz Durcheinander, es MUSS durch diese total beschi$$ene Lösung passieren. Ich könnt auch auf anhieb mindestens 5 andere Lösungen vorschlagen die nicht nur alle performanter sondern auch wesentlich einfacher umzusetzen wären - aber ne, geht nich :-!

Zu deiner Frage - s.o. @mein edit - denke aber das dich dass nur noch mehr verwirren wird

**Exit** · 10.02.2009, 08:03

Geh ich jetzt richtig in der Annahme, dass jeder Eintrag da jetzt in einer Tablerow (TR) steckt?

bigfoot996 · 10.02.2009, 08:09

Nicht ganz, in jeder Reihe sind bissher 3 Einträge, also 3 verschiedene Server.

**Exit** · 10.02.2009, 08:14

Mach es mal bitte etwas ausführlicher - sonst kann ich da nicht viel helfen.

3 Server bedeutet was? Sollen die Sachen nun nach Servern, oder nach Prioritäten filtern/sortieren?

Und muss Dein Filter unbedingt in diese HTML Seite mit rein, oder kannst Du den auch in eine 2. HTML Seite einbauen, welche die eigentliche HTML Seite nur durchsucht und die Ergebnisse dann präsentiert?

Weil für ersteres müsstes Du logischerweise die erste Seite anpassen - zumindest die Basisdatei, welche dann scheinbar per ASP zusätzlich mit dem ganzen Einträgen befüllt wird.

Und falls Du die ASP Seite anpassen darfst, dann wäre es eigentlich auch möglich, dass Du das da schon geordnet ausgibst (falls Du das darfst).

bigfoot996 · 10.02.2009, 08:20

Also schau her, das hier ist eine Reihe:

Code:

<TR class='odd'>
      <TH scope=row><A href="http://zensierter_servername/frame.asp" target="_blank" title="servername_Prio-A">servername_Prio-A</A></TH>
      <TD><img src="images/gruen.gif" class="imgalarm"></TD>
      <TD>0s</TD>
      <!--<TD>Active</TD>-->
      <!--<TD>0</TD>
      <TD>200</TD>-->
      <TD><A title="Doc" href="file://filepfad" target="_blank"><img src="images/folder.gif"></A></TD>
    <td>&nbsp;</td>

      <TH scope=row><A href="zensierter IP" target="_blank" title="FTPname_P_Prio-A">FTP_name_P_Prio-A</A></TH>
      <TD><img src="images/gruen.gif" class="imgalarm"></TD>
      <TD>0s</TD>
      <!--<TD>Active </TD>-->
      <!--<<TD>0</TD>
      TD>&nbsp;</TD>-->
      <TD><A title="Doc" href="file:filepfad" target="_blank"><img src="images/folder.gif"></A></TD>
       <td>&nbsp;</td>

      <TH scope=row><A href="http://blabla" target="_blank" title="GSA_name_GSA Cold Standby_P_Prio-B">GSAname_GSA Cold Standby_P_Pr... </A></TH>
      <TD><img src="images/gruen.gif" class="imgalarm"></TD>
      <TD>0s</TD>
      <!--<TD>Active</TD>-->
      <!--<TD>0</TD>
      <TD>200</TD>-->
      <TD><A title="Doc" href="file://filepfad" target="_blank"><img src="images/folder.gif"></A></TD>
    </TR>

Es soll nach Prio sortiert werden. Wir müssen leider die basisHTML verändern da die ankommende HTML nicht zwischengespeichert werden kann sondern direkt angezeigt werden muss. Die ASP seite müsste ich auch verändern können, aber da hab ich ja noch weniger Ahnung von

**Exit** · 10.02.2009, 08:32

Ja - das ist eine Reihe - aber was willste mir damit sagen?

So nun mal ganz langsam:
Bitte beschreib mal den kompletten Ablauf der Seitenerstellung! Der Anwender klickt auf eine Seite namens "index.asp" - diese holt sich die aktuellen Daten aus der Datenbank - von mehreren Servern und liefert dann eine Seite wie Du sie oben schon mal gepostet hast ab? Richtig?

Wenn dem so ist, dann würde ich radikal mit ASP den Text dahin packen, wo er auch hingehört.

Das wäre das einfachste, sauberste und schnellste.

Den Tabellenaufbau im nachhinein per Javascript auszulesen, geht zwar aber ist eine Katastrophe.

Um mal nen Vergleich zu nennen, mit ASP biste vermutlich in 10-30Minuten durch. Mit dem Javascript Umbau können es locker ein paar Stunden sein, und dabei ist nicht gesagt, dass auch alles immer funktioniert.

PS: Wenn Du mir die ASP Seite liefern würdest, schau ich mal schnell drüber. Aber Achtung - falls da Passwörter oder sowas drin stehen, dann diese vorher entfernen - wir wollen ja hier nicht Werksspionage betreiben.

Sag einfach Bescheid - ob das möglich ist, dann geb ich Dir ne Mail Adresse per PN. Aber bitte kontrolliere, dass Du dies auch darfst - wie gesagt, ich will nicht, dass Du durch sowas entlassen wirst.

bigfoot996 · 10.02.2009, 08:55

Na du wolltest doch wissen obs in einer Reihe steht oder? *g* bzw WAS alles in einer Reihe steht. Ich würde es ja gern genauer beschreiben aber das is sooo ein dummes gefrickel wirklich glaub mir....

Also, es handelt sich wie gesgt um eine Serverüberwachungskonsole, der Server auf der die DB ist steht in nem anderen Netzwerk, einer DMZ, dort darf man keine Ports öffnen zum normalen Netzwerk, sonst wär das ja alles np. So, in anbetracht diesen umständen müssen wir über ne ASP Seite die Sachen vom der DB vom Server in der DMZ rausparsen lassen, diese dann in eine statische HTML verpacken die alle 5 Minuten erneuert wird und dann so auf die Bildschirme hier kommt.

Wie gesagt, die ASP kann ich auch verändern, kein Problem. Wenn du mir eben deine mailaddy hier reinschreibst (PN geht nich, bin knappe 100% überm limit *g*) dann nehm ich mal mit dir Kontakt auf

Kannst sie ja gleich wieder löschen, ich drück hier sowieso minütlich auf F5

**Exit** · 10.02.2009, 08:59

Dann räum mal kurz Deine Inbox ein bisschen auf - im Forum mag ich meine Mail Adresse nicht hinterlassen um Spam zu vermeiden.

So - Mail Adresse ist per PM raus - mal sehen ob Du sie sehen kannst.

bigfoot996 · 10.02.2009, 09:02

Haha is ja schön, Mods können anscheinend auch noch übers Limit schicken *g* Aufräumen is gut gesagt, sind knapp 1k bei nem Limit von 500 *g*