Supportnet / Forum / Webseiten/HTML

Folgende Problemstellung plagt mich und ich habe per google noch nichts passendes gefunden. gegegen: - HTML Tabelle mit einer Telefonliste - keine Einbindung von PHP oder äquivalenter Sprache - kein weiterer Seitenaufruf möglich gesucht: - Möglichkeit in dieser Telefonliste zu suchen mögliche Lösung? - Formfeld in dem ich den Suchbegriff (oder einen Teil davon) eingebe und per Javascript die Treffer in der Tabelle markiert werden und gegebenfalls auch die passende Stelle gesprungen wird - ODER: die Eingabe im Formfeld die Tabelle verändert so dass nur die gewünschten Treffer angezeigt werden FRAGE: Hat jemand so etwas in der Art mal irgendwo gesehen? Da ich nicht fähig bin bzw. nicht die Zeit habe ein entsprechendes JS selbst zu schreiben...

um ehrlich zu sein: die Browser bieten doch diese Funktion (unter "Bearbeiten/Suchen" o.ä.)

Ansonsten kannst du natürlich

ein entsprechendes Formular einbauen

das Script müsste dann die Tabellenzellen durchgehen (kein Problem, sind ja alles Childnodes der Tabelle)

den Inhalt mit dem Suchstring vergleichen

bei Fundstellen
- zB. den Hintergrund umfärben
- einen Anker einfügen und den Browser dorthin schicken

sry etwas OT:

würde auch die suche über browsermittel vorziehen.

bei der einzig möglichen lösung in deinem fall, wie rfb sie beschreibt, würde ich aber als besucher der seite denken: "was soll denn der sche**, können die keine ordentliche suche bauen"..
bei suchfunktionen ist meiner meinung eine serverseitige ausführung pflicht.
JS verursacht im nachhinein oft mehr aufwand und es ist nicht garantiert, dass jeder es nutzen kann.

g,
disco

#1

Mir ist klar, dass jeder Browser diese Funktion bietet - ebenso wie die Funktion die Schriftart zu vergrößern - aber es gibt da eine bestimmte Gruppe von Menschen denen keine dieser Funktionen bekannt ist... ;)

Und der Ansatz ist schön formuliert, aber wie schon gesagt würde das mit meinen JS Kenntnissen mühsam von statten gehen. Mit einem Beispiel könnte ich den Code allerdings leicht adaptieren...

#2

Serverseitige Suche wäre ja so schön einfach, mal abgesehen von den tollen Möglichkeiten mit xmlHTTPrequest etc. aber ist hier auszuschließen. (Warum kann ich auf Anfrage erläutern)

Das JS nicht von jedem nutzbar ist und das in einem "barrierefreien" Internetauftritt damit gearbeitet wird ist sicher keine schöne Sache, aber unter den Umständen mit denen ich hier arbeite nicht anders möglich.

hey .. kapier ich nich .. xmlHTTPrequest is doch clientgedöns .. die serversuche is doch lokal .. oder meinst du dass du mit ajax die ergebnisse vom server holen willst .. oder wie oder was?

erzähl .. hier sind profis .. die haben alles schon mal gesehn ..

#3 Ja Ajax wäre in dem Sinne schon clientseitig. Aber zum Thema:

Ich arbeite hier an dem Webauftritt einer Behörde. Diese haben Zugang zu einem CMS (sixCMS) und dort nur sehr eingeschränkte Möglichkeiten. Es wurde von einem Administrator nun wenigstens ein Template und eine Maske für ein Telefonverzeichnis integriert. Damit ist es immerhin möglich sich die Liste ausgeben zu lassen. Zu diesem einen Template habe ich auch Zugriff, aber wie das halt so ist, können dort natürlich nur HTML & wenige Elemente der Template - Sprache benutzt werden. Ich habe soweit eine Sortierfunktion für die Tabelle über Javascript eingebaut (kennt ihr sicher) und würde nun gern noch die Möglichkeit schaffen in der Tabelle zu suchen. Abfragen an die DB oder sonstiges fallen aus. Ich kann nur die gesamte Tabelle mit dem Telefonverzeichnis aufrufen.
Also dachte ich natürlich an eine JS Lösung - um die Geschichte so einfach wie möglich zu halten und die Darstellung der Tabelle auch mit deaktiviertem JS zu ermöglichen. Bei der Sortierfunktion war das nicht allzu schwer, diese is "unobtrusive" implementiert.

Ich denke mit diesem nur kleinen Einblick in die Problematik bin ich aber nun schon meilenweit vom Thema entfernt. Am besten ich widme mich einer schnellen Lösung wie sie #1 beschrieben hat.

PS: Erstaunlich wie schnell sich hier einem Problem gewidment wird, ich bin beeindruckt.

hey ... profis verändern ein dokument direkt über den dom-baum .. hängen kinder ein und aus ;) .. bin aber kein profi ..deshalb nur die sparversion .. kleine demo ..

<html>
<div id="input"></div>
<div id="display">
<table>
<tr><td>01465/5607 Huber, Gundula</td></tr>
<tr><td>03463/6314 Maier, Alwin</td></tr>
<tr><td>01245/6526 Mayer, Xaver</td></tr>
<tr><td>04646/6630 Meyer, Ernst</td></tr>
<tr><td>02346/3665 Müller, Marlies</td></tr>
<tr><td>03653/6356 Schmidt, Ruth</td></tr>
<tr><td>01465/3666 Schmitz, Dörte</td></tr>
</table>
</div>
<script language="javascript">
var leute=new Array;
for(var n=0;n<document.getElementsByTagName("td").length;n++){
 leute[n]=document.getElementsByTagName("td")[n].innerHTML;
}
document.getElementById("input").innerHTML=
"<form name=´search´ action=´javascript:show()´>"+
"<input type=´text´ name=´searchstr´>"+
"<input type=´submit´ value=´suchen´>"+
"</form>";
show();

function show(){
 var div="<table>";
 var found=false;
 pattern=document.search.searchstr.value.toLowerCase();
 for(var n=0;n<leute.length;n++){
  if(leute[n].toLowerCase().indexOf(pattern)!=-1){
   found=true;
   div+="<tr><td>"+leute[n]+"</td></tr>";
  }
 }
 if(!found) div+="<tr><td>Kein Suchtreffer!</td></tr>";
 div+="</table>";
 document.getElementById("display").innerHTML=div;
}
</script>
</html>

wasn das fürn mist .. das forum macht den code kaputt! .. 2. versuch ..

<html>
<div id="input"></div>
<div id="display">
<table>
<tr><td>01465/5607 Huber, Gundula</td></tr>
<tr><td>03463/6314 Maier, Alwin</td></tr>
<tr><td>01245/6526 Mayer, Xaver</td></tr>
<tr><td>04646/6630 Meyer, Ernst</td></tr>
<tr><td>02346/3665 Müller, Marlies</td></tr>
<tr><td>03653/6356 Schmidt, Ruth</td></tr>
<tr><td>01465/3666 Schmitz, Dörte</td></tr>
</table>
</div>
<script language="javascript">
var leute=new Array;
for(var n=0;n<document.getElementsByTagName("td").length;n++){
 leute[n]=document.getElementsByTagName("td")[n].innerHTML;
}
document.getElementById("input").innerHTML=
"<form name=\"search\" action=\"javascript:show()\">"+
"<input type=\"text\" name=\"searchstr\">"+
"<input type=\"submit\" value=\"suchen\">"+
"</form>";
show();

function show(){
 var div="<table>";
 var found=false;
 pattern=document.search.searchstr.value.toLowerCase();
 for(var n=0;n<leute.length;n++){
  if(leute[n].toLowerCase().indexOf(pattern)!=-1){
   found=true;
   div+="<tr><td>"+leute[n]+"</td></tr>";
  }
 }
 if(!found) div+="<tr><td>Kein Suchtreffer!</td></tr>";
 div+="</table>";
 document.getElementById("display").innerHTML=div;
}
</script>
</html>

ok .. jetz funzt es .. man kanns nur nicht richtig lesen .. die einrückungen werden weggekillt! .. mann mann mann.. meine nerven !!!! ;) .. na ja egal ...

mal abgesehen von den "stilistischen" Mängeln mit nicht-standardisierten JavaScript-Funktionen wie

innerHTML

(auf die du ja schon hingewiesen hast) hat deine Version den Nachteil, das beim Versuch einer 2ten Suche die Original-Tabelle bereits gelöscht ist.

Mit dem Ansatz von "unobtrusive" JavaScript (in deutsch unter dem irreführenden Titel Barrierefreies JavaScript) ist das nur schwer zu vereinbaren.

Wozu rufst du die Funktion

show()

auf vor ihrer Deklaration?

hey rfb! .. thx .. der aufruf von show() kann weg .. ist übriggeblieben von einer version von vorher ;) .. hab ich übersehen ..

das kapier ich nicht .. was ist denn der nachteil davon???

ich erklär mal das mit der tabelle .. so wie ich gabel verstanden hab kriegt er die daten nur als html-tabelle aus dem template gedöns raus .. sie werden dann einmal in den array gelesen und danach nicht mehr gebraucht .. deshalb können sie gelöscht werden .. es war ja der wunsch "b" ;) das nur die suchtreffer angezeigt werden ... gut an der tabelle ist halt das dann auch die nichtscripter noch was zum kucken hamm ;) .. quasi eine kostenlose browserweiche ..

das mit dem childgedöns ist nicht schwer .. hab das schon mal gelesen .. aber kann es halt nicht auswendig .. das wär doch was für dich rfb .. :-)

.. peace

OK wenns nur ums Verstecken der ungewünschten Resultate geht:

<

script type="text/javascript">
<!--
function suche(was) {
was=was.toLowerCase();
var gefunden=0;
var tabelle=document.getElementById("hier");
var zeile=tabelle.getElementsByTagName("tr");
for (var z=0;z<zeile.length;z++) {
 var zelle=zeile[z].getElementsByTagName("td");
 var s="";
 for (var j=0;j<zelle.length;j++) {
  s+=zelle[j].firstChild.data.toLowerCase();
 }
 if (s.indexOf(was)>-1) gefunden++;
 else zeile[z].style.display="none";
}
alert(gefunden+" Treffer");
}
//-->
</script>

die Tabelle sollte die id "

hier

" haben, das Suchformular und eine bessere Ausgabe für die Trefferanzahl (soweit überhaupt gewünscht) fehlen.

Dies Script setzt einfach alle Nichttreffer per

display none

ins Unsichtbare.

Ist natürlich auch nicht ganz unobtrusive JavaScript, da die Existenz der abgefragten Objekte einfach vorausgesetzt wird. Insbesondere wenn in den Tabellenzellen weitere HTML-Elemente stecken könnte das Probleme bereiten.

wer sagts, schon der erste Fehler:

function suche(was) {
was=was.toLowerCase();
var gefunden=0;
var tabelle=document.getElementById("hier");
var zeile=tabelle.getElementsByTagName("tr");
for (var z=0;z<zeile.length;z++) {
 var zelle=zeile[z].getElementsByTagName("td");
 var s="";
 for (var j=0;j<zelle.length;j++) {
  s+=zelle[j].firstChild.data;
 }
 if (s.toLowerCase().indexOf(was)>-1) gefunden++;
 else zeile[z].style.display="none";
}
alert(gefunden+" Treffer");
}

so machen die 3 Großen brav was sie sollen!

hey rfb! .. coole lösung :-)


daran hab ich auch schon gedacht .. damit keine html befehle in die suchtreffer kommen.. aber es hat nicht gefunzt die <td> mit innerText statt innerHTML zu lesen .. mir ist dann eingefallen das ich das prob schon mal hatte ... keine lösung gefunden.. deshalb hab ichs einfach wegelassen und gehofft das keiner merkt .. rofl .. kannst du mir sagen was das prob ist? .. also es kommt als rückgabe von document.getElementsByTagName("td")[n].innerText "undefined" .. sagt die alert-box .. in der scriptconsole kommt kein fehler .. also kein schreibfehler im code oder so .. hm .. strange!

kenn mich mit dem innerHTML-Kram nicht aus, beim DOM müsstest du erst testen wieviel childnodes es gibt, deren Typ abfragen, dann ggf. die Inhalte.

Manche Browser machen aus Leerzeichen im Quellcode (zb zwischen <tr> und <td>) weitere Childnodes, so dass da die seltsamsten "undefined" Objekte entstehen können.

eine neue Version (was tut man nicht alles statt zu arbeiten ;-)

<script type="text/javascript">
<!--
function suche(was) {
was=was.toLowerCase();
var gefunden=0;
var tabelle=document.getElementById("hier");
var zeile=tabelle.getElementsByTagName("tr");
for (var z=0;z<zeile.length;z++) {
 var zelle=zeile[z].getElementsByTagName("td");
 var s="";
 for (var j=0;j<zelle.length;j++) {
  var kids=zelle[j].childNodes;
  for (var k=0;k<kids.length;k++) {
   if (kids[k].nodeType==3) s+=kids[k].data
   if (kids[k].nodeType==1 && kids[k].firstChild && kids[k].firstChild.nodeType==3) s+=kids[k].firstChild.data;
  }
 }
 if (s.toLowerCase().indexOf(was)>-1) gefunden++;
 else zeile[z].style.display="none";
}
alert(gefunden+" Treffer");
}
//-->
</script>

Diese Variante berücksichtigt wenigstens noch 1 Ebene Childnodes und prüft in jedem Fall ob es sich wirklich um Textinhalte handelt - das dürfte die Trefferrate zufriedenstellend erhöhen und die Gefahr von Fehlermeldungen minimieren.

• Tabelle durchsuchen nach bestimmten Werten!!!
• Tabellenblätter durchsuchen
• cookiewert auslesen
• windows: ausführen -> durchsuchen... ändern / anpassen