Mit <select> Tabelle filtern

K

kavanin

Mitglied
Hallo zusammen,

möchte gerne eine Tabelle mit Hilfe einer DropDown-Liste filtern. Habe jetzt das Problem. dass ich es nicht zusammen bringe die Daten in der Tablle die von der DB kommen zu filtern. Da ich für meine Variante irgendwelche inputs ansprechen müsste. Und jetzt weis ich einfach nicht wie ich anfangen soll um es hin zu bekommen Hier mal meine Versuche:

Code: 
<script type="text/javascript">
<!--
function fx(l,d,n)
{
  var f=l.form;
  var v=l.value.split(new RegExp(d));
  if(v.length==n.length)
  {
    for(i=0;i<v.length;++i)
    {
      f.elements[n[i]].value=v[i];
    }
  }
}
//-->
</script>

PHP: 
         <td colspan="3">    
		 	<? $abfrage = mysql_query("SELECT distinct buchung_fuer FROM buchungen order by id");?>                                                                                    
                <select style="font-size:12px;" onchange="fx(this,'À',['id','buchung_fuer'])">
                <option value="auswahl">-------Buchung wählen-------</option>
                <?
                while($row=mysql_fetch_object($abfrage))            
                {                
                    echo '<option style="font-size:12px;" value="'.$row->id.'À'.$row->buchung_fuer.'">'.$row->buchung_fuer.'</option>';
                }
                echo "</select>";
                ?> 
        </td>
 
Zuletzt bearbeitet:
Also ich hoffe mal ich habs richtig verstanden was du willst. So als Gedankenanstoss sollte mein Beispiel glaub reichen:
HTML: 
<html>
  <head>
    <script type="text/javascript">
function fx(l,d)
{
  var f=l;
  var tableEl=document.getElementById(d);
  for(i=1;i<tableEl.rows.length;++i)
  {
    tableEl.rows[i].style.display='block';
  }
  var index=l.options[l.selectedIndex].value;
  if(index!="auswahl"){
    for(i=1;i<tableEl.rows.length;++i)
    {
      if(tableEl.rows[i].cells[1].innerHTML!=index){
        tableEl.rows[i].style.display='none';
      }
    }
  }
}
    </script>
  </head>
  <body>                                                                             
    <select style="font-size:12px;" onchange="fx(this,'tabel')">
      <option value="auswahl">Buchung wählen</option>
      <option style="font-size:12px;" value="Kamel">Kamel</option>
      <option style="font-size:12px;" value="Esel">Esel</option>
      <option style="font-size:12px;" value="Hund">Hund</option>
    </select>
    <table id="tabel" border="1">
      <tr>
        <th>ID</th>
        <th>Name</th>
      </tr>
      <tr>
        <td>1</td>
        <td>Kamel</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Esel</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Kamel</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Esel</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Kamel</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Esel</td>
      </tr>
      <tr>
        <td>7</td>
        <td>Hund</td>
      </tr>
    </table>
  </body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück