Wie kann man dynamisch Elemente auf eine Website bringen?

Csharp-programmierer · Verfasst: So 04.12.16 12:27

Hallo,
jetzt möchte ich die Daten aus der Datenbank schön auf der Website präsentieren. Für jeden Datensatz erzeuge ich eine Tabelle, die so ähnlich aussehen soll wie die in der EE bei "Die letzten 10". Also so eine Art Kästchen mit allen Daten. Jetzt gibt es das Problem, dass jede Tabelle eine eigene ID braucht und ich nicht weiß, wie ich die erzeige, da man ja nicht weiß, wie oft diese erzeugt wird. Gibt es jemanden, der mir helfen kann?

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein

Csharp-programmierer · Verfasst: So 04.12.16 19:29

Im Moment sieht der Code so aus:

markieren

HTML-Dokument

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:

<html>
  <head>
  <title>Test</title>
  </head>
  
  <body>
    <script type="text/javascript">
      function SelectTable(Table) {
        var v = document.getElementsByClassName(Table);
        v[0].style.borderStyle = "7px solid #00b1ff";
      }
    </script>
    
    <div onclick="SelectTable('item');" class="item">
    <table>
    <tr>
      <td><label><font color="#818181" face="Calibri" size="+2">Hallo</label></font></td>
    </tr>
    <tr>
      <td><label><font color="#818181" face="Calibri" size="+1">Wie gehts</label></font></td>
    </tr>
    </table>
    </div>
    
    <br>
    <div onclick="SelectTable('item');" class="item">
    <table>
    <tr>
      <td><label><font color="#818181" face="Calibri" size="+2">Hallo</label></font></td>
    </tr>
    <tr>
      <td><label><font color="#818181" face="Calibri" size="+1">Wie gehts</label></font></td>
    </tr>
    </table>
    </div>
  </body>
</html>

Der Code für eine Tabelle wird dann später in eine while Schleife gepackt. So werden die erzeugt, aber wenn jetzt eine Maus über den DIV rüberfährt, soll dieser DIV animiert werden. Dazu braucht JS ja die ID bzw. irgendein Argument, welches Element verändert werden soll. Und auch wenn man auf den DIV klickt, soll etwas passieren. Wie mache ich sowas?

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein

jfheins · Beiträge: 918 Erhaltene Danke: 158 Win 10 VS 2013, VS2015

Erstmal sind das keine IDs, sondern css Klassen :wink:

Und zu "wie macht man das": Wenn du im Click-Handler thisbenutzt, wird das HTML-Element übergeben. Also z.B.:

markieren

HTML-Dokument

1:	<div onclick="SelectTable(this);" class="item">

Dann ist der Parameter der Methode aber bereits das div, auf das geklickt wurde. getElementsByClassName brauchst du dann nicht mehr.

Das gnaze geht natürlich auch mit IDs (also richtigen). Dazu dann einfach sowas generieren:

markieren

HTML-Dokument

1:	<div onclick="SelectTable(298);" class="item" id="298">

Und daran denken, dass diese id im gesamten Dokument eindeutig sein muss. Also ne fortlaufen Zahl würde sich eigenen. Eventuell noch mit prefix: "tabelle_298"

Csharp-programmierer · Verfasst: So 04.12.16 20:17

Vielen Dank für die Antwort. Ich habe es jetzt gemacht, dass der DIV über CSS animiert wird. Aber wenn dieser jetzt geklickt wird, muss der Wert eines Labels an eine PHP Datei übergeben werden. Wie macht man sowas?

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein

Csharp-programmierer · Verfasst: Mo 05.12.16 13:41

Jetzt hapert es hier dran:

markieren

PHP-Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:

<?php
            $conn = new mysqli($servername, $username, $password, $dbname);
            if ($conn->connect_error) {
              die("Connection failed: " .$conn->connect_error. "Hallo");
            }

            $sql = "SELECT * FROM `MainlysoftBenutzer`";
            $result = $conn->query($sql);
            if ($result->num_rows > 0) {
              while($row = $result->fetch_assoc()) {
                echo "<div class='item' onclick='Animate(this);'>"
                echo "<table>"
                echo "<tr>";
                echo "<td><label><font color='#818181' size='+2' face='calibri'>" .$row["name"]. "</label></font></td>";
                echo "<td><label><font color='#818181' size='+1' face='calibri'>" .$row["email"]. "</label></font></td>";
                echo "</tr>";
                echo "</table></div><br>"
              } 
            } 
            else
            {
              echo "Access danied";
            }
            mysqli_free_result( $db_erg );
            $conn->close();
        ?>

Wenn ich das jetzt so ausführe, dann sieht es so aus:

Einloggen, um Attachments anzusehen!

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein

hydemarie · Beiträge: 481 Erhaltene Danke: 51

Dir fehlen da ein paar Semikolönne nach deinen echos.

Darüberhinaus: Ist das wirklich der vollständige Code? Da scheint irgendwo ein <?php ... ?> zu fehlen.

Csharp-programmierer · Verfasst: Mo 05.12.16 14:45

Das ist der komplette Seitenquelltext:

markieren

HTML-Dokument

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:

<html>
  <head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  
  <body>
  <script>
    function Animate(Control) {
      var x = document.getElementsByClassName("item");
      var i;
      
      for (i = 0; i < x.length; i++) {
        x[i].style.backgroundColor = "#ffffff";
      }
      
      Control.style.backgroundColor = "#c1c1c1";
    }
  </script>
           <?php
            $conn = new mysqli($servername, $username, $password, $dbname);
            if ($conn->connect_error) {
              die("Connection failed: " .$conn->connect_error. "Hallo");
            }

            $sql = "SELECT * FROM `MainlysoftBenutzer`";
            $result = $conn->query($sql);
            if ($result->num_rows > 0) {
              while($row = $result->fetch_assoc()) {
                echo "<div class='item' onclick='Animate(this);'>";
                echo "<table>";
                echo "<tr>";
                echo "<td><label><font color='#818181' size='+2' face='calibri'>" .$row["name"]. "</label></font></td>";
                echo "<td><label><font color='#818181' size='+1' face='calibri'>" .$row["email"]. "</label></font></td>";
                echo "</tr>";
                echo "</table></div><br>";
              } 
            } 
            else
            {
              echo "Access danied";
            }
            mysqli_free_result( $db_erg );
            $conn->close();
        ?> 

    <div class="item" onclick="Animate(this);" >
      <table>
        <tr>
          <td><label class="name_label"><font color="#818181" face="Calibri" size="+2">Hallo</label></font></td>
        </tr>
        <tr>
          <td><label><font color="#818181" face="Calibri" size="+1">Wie gehts</label></font></td>
        </tr>
      </table>
    </div>
    
    <br>
    <div class="item" onclick="Animate(this);">
      <table>
        <tr>
          <td><label><font color="#818181" face="Calibri" size="+2">Hallo</label></font></td>
        </tr>
        <tr>
          <td><label><font color="#818181" face="Calibri" size="+1">Wie gehts</label></font></td>
        </tr>
      </table>
    </div>
  </body>
</html>

Irgendwie scheint ein Tag nicht beendet zu sein, aber ich weiß nicht, welcher

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein

hydemarie · Beiträge: 481 Erhaltene Danke: 51

Irgendwie scheint PHP da einfach nicht zu laufen.

Csharp-programmierer · Verfasst: Mo 05.12.16 14:53

Und wie bringe ich PHP dazu, zu laufen? :shock:

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein

hydemarie · Beiträge: 481 Erhaltene Danke: 51

Auweia.

Auf welchem Server testest du das denn?

Csharp-programmierer · Verfasst: Mo 05.12.16 14:57

Auf meinem Webhosting Server. Aber der Script an sich funktioniert, der sendet alle Daten an das Admin Programm.
Also der PHP Script greift auf den Webserver zu, die HTML Datei an sich wird aber als Lokaldatei ausgeführt.

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein

hydemarie · Beiträge: 481 Erhaltene Danke: 51

Eine .html-Datei im Browser zu öffnen führt auf gar keinen Fall einen PHP-Interpreter aus.

Csharp-programmierer · Verfasst: Mo 05.12.16 15:01

Also muss ich eine .php Datei nehmen? Und warum auweia?

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein

hydemarie · Beiträge: 481 Erhaltene Danke: 51

Du musst dort, wo die HTML-Datei liegt, einen PHP-Interpreter nutzen. Browser können kein PHP.

Csharp-programmierer · Verfasst: Mo 05.12.16 15:08

Und wie benutze ich so einen PHP Interpreter? Ich habe den geposteten Quelltext genommen und einfach in eine PHP Datei geschrieben. Es passiert aber immer noch nichts

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein

hydemarie · Beiträge: 481 Erhaltene Danke: 51

Also zur Klarstellung: PHP wird serverseitig interpretiert. Das heißt:

Du fragst beim Server eine PHP-Datei an.
Der Server schickt dem PHP-Interpreter die angefragte PHP-Datei.
Der PHP-Interpreter schickt die fertige HTML-Datei zurück.

Das bedeutet: PHP-Code geht nicht einfach aus C:\ heraus - es sei denn, du betreibst einen lokalen Webserver, zum Beispiel XAMPP.

Csharp-programmierer · Verfasst: Mo 05.12.16 15:15

Ahh. Aber als ich damals im Forum gefragt habe, ob man PHP Dateien aus C:/ ausführen kann, wurde ja gesagt :/
Aber jetzt funktioniert es :beer:

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein

hydemarie · Beiträge: 481 Erhaltene Danke: 51

Natürlich kann man, wenn da ein Server läuft...

Csharp-programmierer · Verfasst: Mo 05.12.16 15:23

Stimmt

Jetzt werden alle Daten haar genau so dargestellt, wie ich es mir vorgestellt habe. Wenn jetzt auf ein DIV geklickt wird, soll ein Label ausgelesen werden und der Text an eine PHP Datei übergeben werden. Man könnte ja die Elemente des DIVs auswählen und dann das eine Label, welches über eine Class identifiziert ist, auslesen. Aber wie bekomme ich die untergeordneten Elemente eines DIVs?

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein

hydemarie · Beiträge: 481 Erhaltene Danke: 51

Entweder via JavaScript (such' dir die children) oder via Child-Nodes.

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme