[JavaScript+PHP] Per JavaScript in einer SelectBox <div> Elemente filtern.

TS7

TS7

Mitglied
Ich hoffe ich Poste hier richtig, wenn nicht bitte verschieben.

Hallo,
und zwar habe ich folgendes Problem:

Ich habe eine Datei wo ich eine Tabelle per MySql auslese und anzeigen lasse ob die Mitglieder, die Mitgliedschaft schon bezahlt haben.

Ich habe es mit DIV Tag versucht, leider filtert er es aber nicht.

Es wäre nett, wenn sich jemand finden könnte der mir hilft, nur die Mitglieder anzuzeigen, wie ich den Filter (Auswahlmenü/Select [Ja, Nein oder Kostenlos]) eingestellt habe.

Hoffe ich habs ein bisschen verständlich erklärt.

hier der Code:
PHP: 
<script language="JavaScript" type="text/javascript">
<!--
function doIt(theValue)
{
    var divs=document.getElementsByTagName("DIV");
    for (var i=0;i<divs.length;i++)
    {
        if (divs[i].className=="mitgliedschaft")
        {
        divs[i].style.display=(( theValue=="every" || divs[i].id==theValue)?"block":"none");
        };
    }
}
//-->
</script>
</head>

<body bgcolor="#ACACAC">
<p align="center"><strong>Bezahlt</strong> <strong> Liste</strong></p>
<table width="100%" border="0">
  <tr>
    <th width="14%" scope="col">Sotieren:</th>
    <th width="77%" scope="col"><label>
        <select id="Select" onchange="doIt(this.value)">
        <option value="every">Alle anzeigen</option>
        <option value="Kostenlos">Kostenlos</option>
        <option value="Ja">Ja</option>
        <option value="Nein">Nein</option>
      </select>
    </label></th>
    <th width="9%" scope="col">&nbsp;</th>
  </tr>
</table>
<?

//Verbindung mit Dadenbank (Zeilen entfernt, zur übersichtlichkeit)

    $sqlstatement="SELECT ID, Vorname, Nachname, Mitgliedschaft, Bezahlt_ja_nein FROM Mitglieder ORDER BY ID";
    $result=mysql_query($sqlstatement);

    if ($result)
    {
       print "<table border=\"1\" cellspacing=\"0\" ".
       "cellpadding=\"0\" WIDTH=\"100%\" >\n";

       print "<tr><th><u>Vorname</u></th><th><u>Nachname</u></th><th><u>Status</u></th><th><u>Bezahlt</u></th><th>bearbeiten</th></tr>\n";
       while ($dataset = mysql_fetch_array($result))

           {
        print "<div id=".$dataset['Bezahlt_ja_nein']."class=\"mitgliedschaft\">";
        print "<tr>";
        print "<td>".$dataset['Vorname']."</td>";
        print "<td>".$dataset['Nachname']."</td>";
        print "<td>".$dataset['Mitgliedschaft']."</td>";
        print "<td>".$dataset['Bezahlt_ja_nein']."</td>";
        print "<td><form name=\"form1\" method=\"post\" action=\"bearbeiten.php\"><input type=\"submit\" name=\"bearbeiten\" value=".$dataset['ID']."></form></td>";
        print "</tr>\n";
        print "</div>";
        
    }
    $count = mysql_num_rows($result);
    print "</table>\n";
      }

   ?>

Würde mich sehr über eure Hilfe freuen.

Lieben Gruß
 
Hi,

die Struktur deiner Tabelle ist falsch. Es ist nicht erlaubt, Tabellenzeilen in DIVs zu schreiben. Hier solltest du besser auf die Zeilen der Tabelle zugreifen und durchlaufen (rows-Kollektion).

Weiterhin vergibst du IDs über die Komponente "Bezahlt_ja_nein" des assoziativen Arrays. Hiermit kannst du jedoch nicht die Eindeutigkeit gewährleisten, die für IDs gefordert wird.
Als Lösung könntest du hier das Anzeigekriterium durch ein Leerzeichen getrennt in den Klassenname aufnehmen. Mit Hilfe eines regulären Ausdrucks und der Methode search könntest du prüfen, ob die aktuelle Zeile dem geforderten Kriterium entspricht.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script language="javascript">
<!--
function doIt(theValue){
  // Zeilen der Tabelle ermitteln
  arrRows = document.getElementById("table_01").getElementsByTagName("tbody")[0].rows;

  // Tabelle ab zweiter Zeile durchlaufen
  for(var i=1; i<arrRows.length; i++){
    if (arrRows[i].className.search(/mitgliedschaft/) != -1){
      arrRows[i].style.display = (( theValue=="every" || arrRows[i].className.search(new RegExp(theValue, "i"))!=-1)? "" : "none");
    }
  }
}
//->
</script>
</head>
<body>
<table width="100%" border="0">
  <tr>
    <th width="14%" scope="col">Sotieren:</th>
    <th width="77%" scope="col"><label>
        <select id="Select" onchange="doIt(this.options[this.selectedIndex].value);">
        <option value="every">Alle anzeigen</option>
        <option value="Kostenlos">Kostenlos</option>
        <option value="Ja">Ja</option>
        <option value="Nein">Nein</option>
      </select>
    </label></th>
    <th width="9%" scope="col">&nbsp;</th>
  </tr>
</table>

<table id="table_01">
	<tr><th><u>Vorname</u></th><th><u>Nachname</u></th><th><u>Status</u></th><th><u>Bezahlt</u></th><th>bearbeiten</th></tr>
	<tr class="mitgliedschaft Ja">
	  <td>Vorname0</td>
	  <td>Nachname0</td>
	  <td>Mitgliedschaft0</td>
	  <td>ja/nein</td>
	  <td><form name="form0" method="post" action="bearbeiten.php"><input type="submit" name="bearbeiten" value="v_01"></form></td>
	</tr>
	<tr class="mitgliedschaft Nein">
	  <td>Vorname1</td>
	  <td>Nachname1</td>
	  <td>Mitgliedschaft1</td>
	  <td>ja/nein</td>
	  <td><form name="form1" method="post" action="bearbeiten.php"><input type="submit" name="bearbeiten" value="v_01"></form></td>
	</tr>
	<tr class="mitgliedschaft Kostenlos">
	  <td>Vorname2</td>
	  <td>Nachname2</td>
	  <td>Mitgliedschaft2</td>
	  <td>ja/nein</td>
	  <td><form name="form2" method="post" action="bearbeiten.php"><input type="submit" name="bearbeiten" value="v_01"></form></td>
	</tr>
	<tr class="mitgliedschaft Ja">
	  <td>Vorname2</td>
	  <td>Nachname2</td>
	  <td>Mitgliedschaft2</td>
	  <td>ja/nein</td>
	  <td><form name="form2" method="post" action="bearbeiten.php"><input type="submit" name="bearbeiten" value="v_01"></form></td>
	</tr>
</table>
</body>
</html>
Vielleicht kannst du etwas damit anfangen.

Ciao
Quaese
 
Danke für deine Antwort.

Ohhh, da muss ich leider passen.
Das überfordert mich ganz schön.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück