Tabelle mit Suche für ein Register

Andrea2014

Hallo,

ich bin in einem Sportclub (verschiedene Aktivitäten) und möchte dafür eine Webseite erstellen. (Naja, ich bin die "doofe" Freiwillige... die "muss"!) Ich möchte eine Seite erstellen, welche ich später auf die Hauptseite intigrieren kann.

Auf dieser Seite soll eine Tabelle(Register), welche alle Mitglieder auflistet (natürlich mit Einverstädnis).
Das ganze hat den Sinn, Mitspieler der gleichen Sportart zu suchen und sich dann zum Sport zu verabreden.

Da wir eben sehr viele Mitglieder sind, braucht diese Tabelle eine Suchfunktion. Beispiel: Textfeld bei dem man "Kegeln" eingibt und dann alle Mitglieder die eben gerne Kegeln auflistet. Im prinzip leicht, doch Umsetzen?

Ich habe kleine html Kentnisse und wollte eine einfache Suche einbauen. Das Problem, man muss dort die divs ect. benennen und die Suche ist sehr "schlecht"... nun habe ich gedacht - vielleicht gehts einfacher!

Meine Ideen:

Autoit Program erstellen und auf HTML einbinden
Openoffice / Word Tabelle mit Suchfunktion erstellen und einbinden

Was sagt Ihr dazu bzw. geht sowas überhaupt? Bin gerade am googeln ob man eine Office Tabelle auf die Webseite bauen kann.... (mit Suche!)
Das ganze sollte auch leicht zu editieren sein - sprich neue Spieler eintragen oder entfernen sollten diese austreten.

Ich hoffe ich habt eine einfache Lösung. Danke

**chip**

Hat mit Autoit nicht wirklich was zu tun, dazu nimmt man z.b. php oder wenn es rein clientseitg sein soll dann javascript. Sprich hier im Forum total falsch.

Aber trotzdem, hier eine Javascriptmöglichkeit:

Spoiler anzeigen

HTML

<html>
<div id="input"></div>
<div id="display">
<table border="1">
<tr><td>Huber</td><td>Gundula</td><td>Kegeln</td></tr>
<tr><td>Maier</td><td>Alwin</td><td>Fußball</td></tr>
<tr><td>Mayer</td><td>Xaver</td><td>Kegeln</td></tr>
<tr><td>Meyer</td><td>Ernst</td><td>Kegeln</td></tr>
<tr><td>Müller</td><td>Marlies</td><td>Billiard</td></tr>
<tr><td>Schmidt</td><td>Ruth</td><td>Billiard</td></tr>
<tr><td>Schmitz</td><td>Dörte</td><td>Kegeln</td></tr>
</table>
</div>
<script language="javascript">
var leute=new Array;
for(var n=0;n<document.getElementsByTagName("tr").length;n++){
 leute[n]=document.getElementsByTagName("tr")[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>"+leute[n]+"</tr>";
  }
 }
 if(!found) div+="<tr><td>Kein Suchtreffer!</td></tr>";
 div+="</table>";
 document.getElementById("display").innerHTML=div;
}
</script>
</html>

Alles anzeigen