Javascript: Göra sökfilter och dynamiskt bygga om tabell

[bos]

Jag hackar lite sidor åt en hockeyklubb (PHP + Postgres samt lite javascript, det senare beroende på hur mycket jag lyckas lära mig under projektets gång). Nu står jag inför en kodförändring som jag inte riktigt vet hur jag ska angripa.

På en av sidorna kan lagledare välja in personer till sin trupp. När de klickar på "Anslut spelare till denna trupp" byggs en sida upp med alla inlagda spelare i databasen. Alla spelare har en kryssruta som lagledarna kryssar i för den spelare de vill ha, och sen klickar de "Ok" för att välja. Så långt allt väl.

Nu är det så att antalet spelare har växt enormt sen projektet drog igång för två år sen. Det är lite knivigt att leta fram rätt spelare i en fyrkolumnig tabell med väldigt många (FÖR många) namn. En fullösning jag gjorde då var att implementera ett filter. T.ex "lista alla {män,kvinnor} födda under år {1976-1980,1981-1985,1986-1990, osv}". Det funkar, men problemet här är att även dessa årskullar är såpass stora att det blir ändå väldigt många namn.

Inatt sov jag fram till en ny lösning som jag tror kan bli den bästa, men då mina kunskaper i Javascript är väldigt skrala så vet jag inte hur jag ska utföra det på bästa sätt.

Det jag har tänkt mig är att när lagledarna kommer till sidan för spelarlistan så ska alla spelare listas i tabellform (precis som nu). Längst upp ska det dock finnas ett textfält, "Namnfilter", samt en knapp "Sök". När man skriver in exempelvis "all" ska tabellen rensas, och samtliga namn (för- som efter-) som matchar "all" listas. T.ex Kalle Kallesson, Frida Allansson, osv. Såna filter är väldigt vanliga i webbutiker. Jag vill som sagt att denna filtrering ska göras on-the-fly, utan att ladda om sidan.

Om vi utgår att alla spelare (med tillhörande kryssruta, korrekta id-taggar, och liknande) listas i tabellen, hur implementerar jag min dynamiska tabellbyggare? Eller, vilka javascript-saker vill jag lära mig mer om?

(Jag känner till .innerHtml, onclick() och dessa grundläggande JS-sakerna, men jag vet inte riktigt hur jag ska få allt att samarbeta med varandra och bygga om tabellen dynamiskt)

[speakman]

Jag skulle defintivt använt något JavaScript Framework, typ jQuery, för att göra mer avancerade saker. Att börja från scratch för egen hand känns lite som att koda webbsidor i assembler.. eller nått.

[E85]

Sök reda på lite info om ajax. En lämplig sökning på google kan vara t.ex ajax php tutorial. Det gav mig bl.a den här: http://www.w3schools.com/PHP/php_ajax_database.asp

[4kTRB]

För <table> och <tr> i HTML kan du använda javascript.
För <table> finns metoden insertRow() som lägger till en ny tom <tr>
och för <tr> finns metoden insertCell() som skapar ett nytt <td> element.
deleteRow() och deleteCell() om du ska ta bort.

[4kTRB]

Här har du en dynamiskt uppbyggd tabell med javascript.
Jag har använt det till flera websidor och de blir lite proffsigare.

Kod: Markera allt

  var antalRader = 5; 
  var td = 10;
//*******************************************
//* Dynamisk tabell
//*******************************************
function createTable(){
 
  var radindex = 0;
  var tabell = this.dyntabell;
for (var i=antalRader; i>=1; i--) {
  try{
	  nyRad = tabell.insertRow(radindex);
  }
  catch(e){
	alert(e);
  }
  radindex++;
  
  //**********************************************
  //* Kolumn 0
  //**********************************************
 
  nyCell = nyRad.insertCell(0);
 
  dyn_HTML = "<td id=''  height='' bordercolor='' bordercolordark='' bordercolorlight=''>";
  dyn_HTML += "</td>"
  nyCell.innerHTML = dyn_HTML;
  td=td-1;
  if (td <=0) {funktion();return;}
 
  //**************************************************
  //* Kolumn 1
  //**************************************************
  nyCell = nyRad.insertCell(1);
  dyn_HTML = "<td id=''  height='' bordercolor='' bordercolordark='' bordercolorlight=''>";
  dyn_HTML += "</td>"
  nyCell.innerHTML = dyn_HTML;
  td=td-1;
  if (td <=0) {funktion();return;}
 }
}


<table align="center" id="dyntabell" cellpadding="15" cellspacing="10" border="1" width="400">
	<tr>
	</tr>
</table>