✔ Durch onclick Werte in Datenbank übergeben

CreativPur

CreativPur

Erfahrenes Mitglied
Hi,

ich habe eine Lottoseite, wo ich die Zahlen 1-49 in eine Tabelle eingebunden habe..
tabelle.png

Wenn man eine Zahl anklickt, wird der Hintergrund grau.
tabelle2.png

Das erreiche ich durch folgendes Script..
Code: 
<script  type="text/javascript">
function highlight(Id) {
   if (document.getElementById('Zahl'+Id).style.backgroundColor == 'silver') { document.getElementById('Zahl'+Id).style.backgroundColor = '#fff'; }
   else { document.getElementById('Zahl'+Id).style.backgroundColor = 'silver'; }
 
   }
</script>

HTML: 
<table width="90%" border="1">
                                                  <tr>
                                                    <td colspan="7" style="color:black; text-align:right; font-size:12px;" height="30px">Zahlen entfernen
                                                        <a href="#">
                                                        <span class="glyphicon glyphicon-trash" style="color:red;">&nbsp;&nbsp;</span>
                                                        </a>
                                                    </td>
                                                  </tr>  
                                                  <tr>
                                                    <td class="td_ent" id="Zahl1" onClick="highlight(1)">1</td>
                                                    <td class="td_ent" id="Zahl2" onClick="highlight(2)">2</td>
                                                    <td class="td_ent" id="Zahl3" onClick="highlight(3)">3</td>
                                                    <td class="td_ent" id="Zahl4" onClick="highlight(4)">4</td>
                                                    <td class="td_ent" id="Zahl5" onClick="highlight(5)">5</td>
                                                    <td class="td_ent" id="Zahl6" onClick="highlight(6)">6</td>
                                                    <td class="td_ent" id="Zahl7" onClick="highlight(7)">7</td>
                                                  </tr>
                                                  <tr>
                                                    <td class="td_ent" id="Zahl8" onClick="highlight(8)">8</td>
                                                    <td class="td_ent" id="Zahl9" onClick="highlight(9)">9</td>
                                                    <td class="td_ent" id="Zahl10" onClick="highlight(10)">10</td>
                                                    <td class="td_ent" id="Zahl11" onClick="highlight(11)">11</td>
                                                    <td class="td_ent" id="Zahl12" onClick="highlight(12)">12</td>
                                                    <td class="td_ent" id="Zahl13" onClick="highlight(13)">13</td>
                                                    <td class="td_ent" id="Zahl14" onClick="highlight(14)">14</td>
                                                  </tr>
                                                  <tr>
                                                    <td class="td_ent" id="Zahl15" onClick="highlight(15)">15</td>
                                                    <td class="td_ent" id="Zahl16" onClick="highlight(16)">16</td>
                                                    <td class="td_ent" id="Zahl17" onClick="highlight(17)">17</td>
                                                    <td class="td_ent" id="Zahl18" onClick="highlight(18)">18</td>
                                                    <td class="td_ent" id="Zahl19" onClick="highlight(19)">19</td>
                                                    <td class="td_ent" id="Zahl20" onClick="highlight(20)">20</td>
                                                    <td class="td_ent" id="Zahl21" onClick="highlight(21)">21</td>
                                                  </tr>
                                                  <tr>
                                                    <td class="td_ent" id="Zahl22" onClick="highlight(22)">22</td>
                                                    <td class="td_ent" id="Zahl23" onClick="highlight(23)">23</td>
                                                    <td class="td_ent" id="Zahl24" onClick="highlight(24)">24</td>
                                                    <td class="td_ent" id="Zahl25" onClick="highlight(25)">25</td>
                                                    <td class="td_ent" id="Zahl26" onClick="highlight(26)">26</td>
                                                    <td class="td_ent" id="Zahl27" onClick="highlight(27)">27</td>
                                                    <td class="td_ent" id="Zahl28" onClick="highlight(28)">28</td>
                                                  </tr>
                                                  <tr>
                                                    <td class="td_ent" id="Zahl29" onClick="highlight(29)">29</td>
                                                    <td class="td_ent" id="Zahl30" onClick="highlight(30)">30</td>
                                                    <td class="td_ent" id="Zahl31" onClick="highlight(31)">31</td>
                                                    <td class="td_ent" id="Zahl32" onClick="highlight(32)">32</td>
                                                    <td class="td_ent" id="Zahl33" onClick="highlight(33)">33</td>
                                                    <td class="td_ent" id="Zahl34" onClick="highlight(34)">34</td>
                                                    <td class="td_ent" id="Zahl35" onClick="highlight(35)">35</td>
                                                  </tr>
                                                  <tr>
                                                    <td class="td_ent" id="Zahl36" onClick="highlight(36)">36</td>
                                                    <td class="td_ent" id="Zahl37" onClick="highlight(37)">37</td>
                                                    <td class="td_ent" id="Zahl38" onClick="highlight(38)">38</td>
                                                    <td class="td_ent" id="Zahl39" onClick="highlight(39)">39</td>
                                                    <td class="td_ent" id="Zahl40" onClick="highlight(40)">40</td>
                                                    <td class="td_ent" id="Zahl41" onClick="highlight(41)">41</td>
                                                    <td class="td_ent" id="Zahl42" onClick="highlight(42)">42</td>
                                                  </tr>
                                                  <tr>
                                                    <td class="td_ent" id="Zahl43" onClick="highlight(43)">43</td>
                                                    <td class="td_ent" id="Zahl44" onClick="highlight(44)">44</td>
                                                    <td class="td_ent" id="Zahl45" onClick="highlight(45)">45</td>
                                                    <td class="td_ent" id="Zahl46" onClick="highlight(46)">46</td>
                                                    <td class="td_ent" id="Zahl47" onClick="highlight(47)">47</td>
                                                    <td class="td_ent" id="Zahl48" onClick="highlight(48)">48</td>
                                                    <td class="td_ent" id="Zahl49" onClick="highlight(49)">49</td>
                                                  </tr>
                                                </table>

Jetzt möchte ich die auserwählten Zahlen in der Datenbank (MySQL) in der Spalte "aktiv" mit nein umsetzten..
db.png

Dabei sollen alle Zahlen, mit "aktiv" nein versehen sind in der Lottotabelle grau hinterlegt sein.

Ist das überhaupt möglich, und wenn ja, wie stelle ich dies am besten an ?

Vielen Dank
 
Ich habe Dir mal ein kleines Beispiel gebastelt, wie es aussehen könnte.
Ich habe aber JQuery benutzt. Ich denke es erklärt sich von selber. Und den Button "Zahlen entfernen" solltest Du selber hinbekommen.
Ich habe nun nicht alles 49 Felder gemacht, sondern nur 7, aber das sollte es alles erklären, und auch funktionieren.
Die html sieht so aus:
HTML: 
<html>
    <head>
        <title>Test</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>

    </head>
    <body>
        <table width="90%" border="1">
          <tr>
            <td colspan="7" style="color:black; text-align:right; font-size:12px;" height="30px">Zahlen entfernen
                <a href="#">
                <span class="glyphicon glyphicon-trash" style="color:red;">&nbsp;&nbsp;</span>
                </a>
            </td>
          </tr>
          <tr>
            <td class="td_ent" id="Zahl1" data-highlight="1">1</td>
            <td class="td_ent" id="Zahl2" data-highlight="2">2</td>
            <td class="td_ent" id="Zahl3" data-highlight="3">3</td>
            <td class="td_ent" id="Zahl4" data-highlight="4">4</td>
            <td class="td_ent" id="Zahl5" data-highlight="5">5</td>
            <td class="td_ent" id="Zahl6" data-highlight="6">6</td>
            <td class="td_ent" id="Zahl7" data-highlight="7">7</td>
          </tr>
        </table>
    </body>

    <script type="text/javascript">
    $( document ).ready(function() {
        //Ajax beim Seite laden
        $.ajax({
        type: "POST",
            url: "test.php",
            data: {
                load: 1
            },
            dataType: 'json',
            cache: false,
            success: function(content) {
                var cnt = Object.keys(content).length;
                while(cnt > 0){
                    cnt = cnt -1;
                    if(content[cnt].aktiv == 0){
                        $('[data-highlight='+content[cnt].lottozahl+']').css('backgroundColor', "rgb(255, 255, 255)");
                    }else{
                        $('[data-highlight='+content[cnt].lottozahl+']').css('backgroundColor', "rgb(192, 192, 192)");
                    }
                    $(this).css('background-color', 'red');
                }
            }
        });

        $('.td_ent').on('click', function() {
            var bgcolor = $(this).css('backgroundColor');
            var lottozahl = $(this).data("highlight");
            var aktiv = 0;

            //Farbwechsel
            if(bgcolor === 'rgb(192, 192, 192)'){
                $(this).css('backgroundColor', "rgb(255, 255, 255)");
                aktiv = 0;
            }else{
                $(this).css('backgroundColor', "rgb(192, 192, 192)");
                aktiv = 1;
            }

            //Ajax für DB Eintrag
            $.ajax({
            type: "POST",
                url: "test.php",
                data: {
                    aktiv: aktiv,
                    lottozahl: lottozahl
                },
                success: function(content) {
                    $("#content").text(content);
                }
            });
        });
    });
    </script>
</html>
und meine dazugehörende test.php sieht so aus:
PHP: 
<?php
$mysqli = new mysqli("localhost", "root", "root", "testen");
if ($mysqli->connect_errno) {
    die("Verbindung fehlgeschlagen: " . $mysqli->connect_error);
}

if (isset($_POST["load"]) && !empty($_POST["load"])) $load = 1; else $load = 0;

if($load == 1){
    $sql = "SELECT lottozahl, aktiv FROM lottozahlen";
    $statement = $mysqli->prepare($sql);
    $statement->execute();
    $result = $statement->get_result();
    $i=0;
    while($row = $result->fetch_object()) {
        $array_ergebnis[$i]['lottozahl'] = "$row->lottozahl";
        $array_ergebnis[$i]['aktiv'] = "$row->aktiv";
        $i++;
    }
    echo json_encode($array_ergebnis);
    exit();
}

$sql = "UPDATE lottozahlen SET aktiv = ? WHERE lottozahl = ?";
$statement = $mysqli->prepare($sql);
$statement->bind_param('si', $aktiv, $lottozahl);
$aktiv = $_POST['aktiv'];
$lottozahl = $_POST['lottozahl'];
if(!$statement->execute()) {
  echo "Query fehlgeschlagen: ".$statement->error;
}
?>

Meine DB sieht so aus, ich habe nicht mit ja/nein gearbeitet sondern mit 0/1, aber das solltest Du auch selber ändern können:
 

Anhänge

  • db1.png
    db1.png
    18 KB · Aufrufe: 4
Hi Heiko,

vielen Dank für Deine Mühe.. Du hast dir echt viel Mühe gemacht.. Ich versuche gerade PHP, jQuery und Co zu verstehen..

Ich habe eine kleine Änderung vorgenommen..
Aktive Zahlen habe ich auf 1 und NICHT-Aktive auf 0 gesetzt..

Leider weiß ich nicht, wie ich die NICHT-Aktiven Zahlen in der Tabelle farblich hinterlegen kann. Wahrscheinlich durch ein SELECT. Ich weiß allerdings nicht, wie ich das anstellen muss.
Denn wenn Sie bei "1" aktiv sind, muss ich doch auch die Möglichkeit haben, die Aktiven Zahlen wieder auf "NULL" zu bekommen.

So sieht es jetzt bei mir aus..

PHP: 
$mysqli = new mysqli("xxxx", "xxx", "xxx", "xxx");
if ($mysqli->connect_errno) {
    die("Verbindung fehlgeschlagen: " . $mysqli->connect_error);
}
if (isset($_POST["load"]) && !empty($_POST["load"])) $load = 0; else $load = 1;
if($load == 0){
    $sql = "SELECT lottozahl, aktiv FROM Lottozahlen";
    $statement = $mysqli->prepare($sql);
    $statement->execute();
    $result = $statement->get_result();
    $i=1;
    while($row = $result->fetch_object()) {
        $array_ergebnis[$i]['lottozahl'] = "$row->lottozahl";
        $array_ergebnis[$i]['aktiv'] = "$row->aktiv";
        $i++;
    }
    echo json_encode($array_ergebnis);
    exit();
}
$sql = "UPDATE Lottozahlen SET aktiv = ? WHERE lottozahl = ?";
$statement = $mysqli->prepare($sql);
$statement->bind_param('si', $aktiv, $lottozahl);
$aktiv = $_POST['aktiv'];
$lottozahl = $_POST['lottozahl'];
if(!$statement->execute()) {
  echo "Query fehlgeschlagen: ".$statement->error;
}


HTML: 
<form name="lz">
        <table width="90%" border="1" align="center">
          <tr>
            <td colspan="7" style="color:black; text-align:right; font-size:12px;" height="30px">Zahlen entfernen
                <a href="bearbeiten.php" type="submit"><span class="glyphicon glyphicon-trash" style="color:red;">&nbsp;&nbsp;</span></a>
            </td>
          </tr>
          <tr>
            <td class="td_ent" id="Zahl1" data-highlight="1">1</td>
            <td class="td_ent" id="Zahl2" data-highlight="2">2</td>
            <td class="td_ent" id="Zahl3" data-highlight="3">3</td>
            <td class="td_ent" id="Zahl4" data-highlight="4">4</td>
            <td class="td_ent" id="Zahl5" data-highlight="5">5</td>
            <td class="td_ent" id="Zahl6" data-highlight="6">6</td>
            <td class="td_ent" id="Zahl7" data-highlight="7">7</td>
          </tr>
</table>

</form>

Code: 
    <script type="text/javascript">
    $( document ).ready(function() {
        //Ajax beim Seite laden
        $.ajax({
        type: "POST",
            url: "test.php",
            data: {
                load: 0
            },
            dataType: 'json',
            cache: false,
            success: function(content) {
                var cnt = Object.keys(content).length;
                while(cnt > 0){
                    cnt = cnt -1;
                    if(content[cnt].aktiv == 1){
                        $('[data-highlight='+content[cnt].lottozahl+']').css('backgroundColor', "rgb(255, 255, 255)");
                    }else{
                        $('[data-highlight='+content[cnt].lottozahl+']').css('backgroundColor', "rgb(192, 192, 192)");
                    }
                    $(this).css('background-color', 'red');
                }
            }
        });
        $('.td_ent').on('click', function() {
            var bgcolor = $(this).css('backgroundColor');
            var lottozahl = $(this).data("highlight");
            var aktiv = 1;
            //Farbwechsel
            if(bgcolor === 'rgb(192, 192, 192)'){
                $(this).css('backgroundColor', "rgb(255, 255, 255)");
                aktiv = 1;
            }else{
                $(this).css('backgroundColor', "rgb(192, 192, 192)");
                aktiv = 0;
            }
            //Ajax für DB Eintrag
            $.ajax({
            type: "POST",
                url: "test.php",
                data: {
                    aktiv: aktiv,
                    lottozahl: lottozahl
                },
                success: function(content) {
                    $("#content").text(content);
                }
            });
        });
    });
    </script>
 
Zuletzt bearbeitet:
Ich verstehe nun nicht ganz was Du möchtest.
Die Farben werden in folgenden Zeilen definiert:
Dieser Abschnitt beim laden der Seite.
Code: 
if(content[cnt].aktiv == 0){
                        $('[data-highlight='+content[cnt].lottozahl+']').css('backgroundColor', "rgb(255, 255, 255)");
                    }else{
                        $('[data-highlight='+content[cnt].lottozahl+']').css('backgroundColor', "rgb(192, 192, 192)");
                    }
Wenn aktiv = 0 dann wird der Hintergrund weiß, ansonsten grau (kannst Du ja die Farben anpassen)
Hier wenn man auf den eine Zelle klickt:
Code: 
if(bgcolor === 'rgb(192, 192, 192)'){
                $(this).css('backgroundColor', "rgb(255, 255, 255)");
                aktiv = 0;
            }else{
                $(this).css('backgroundColor', "rgb(192, 192, 192)");
                aktiv = 1;
            }
Hier wird kontrolliert ob die Hintergrundfarbe Silber (192,192,192) ist, wenn nicht dann setzt er sie auf Weiß und aktiv = 0 und trägt dann den Status ist die Datenbank ein per Ajax.
Wenn Du mir etwas genauer erklärst was Du noch haben möchtest, kann ich dies gerne versuchen umzusetzen.
Oder meinst Du den Button alle Zahlen entfernen?
Ich schreibe es mal um, das es mit ja / nein ist.
 
Hi Heiko,

du brauchst es nicht auf ja/nein umzuschreiben.. Das habe ich schon geändert..
Was ich meine..

Wenn ich die Zahlen anklicke, wird der Hintergrund grau und somit wird diese Zahl in der Tat in der Datenbank auf "0" gesetzt..
Das funktioniert auch wunderbar..
Was meinte ich ?
Wenn ich auf meinen Button klicke zum absenden, dann werden wieder alle Hintergründe weiß. Aber die NICHT-Aktiven sollten den grauen Hintergrund beibehalten.
Und wenn ich dann wieder drauf klicke, soll der Wert in der Datenbank wieder auf "1" sein
 
Entweder liegt es daran, das heute Samstag ist, oder sonst wodran. Aber ganz verstehen tue ich es immer noch nicht.
Absenden brauchst Du das Formular so ja nicht mehr, da die Änderungen ja direkt in der DB gespeichert werden, sobald Du eine Zelle anklickst.
(Sehe auch keinen senden Button).
Du kannst direkt einen link auf die Seite setzen wo Du dann hin möchtest.
Kannst Die Seite auch einfach mal reloaden (F5), dann sieht man das die Einträge die Farbe behalten.

Den Button leeren werde ich heute Abend einbauen, muss nun erst mal einkaufen :) .
Denn dies kannst Du auch einfach per Ajax machen, so das kein Formular übertragen werden muss.

Wegen den Farben, ich hatte es umgekehrt: 0=nein=weiß und 1=ja=grau
Ich habe nun 0=nein=grau und 1=ja=weiß

Folgende 2 Abschnitte ändern:
Code: 
if(content[cnt].aktiv == 1){
                        $('[data-highlight='+content[cnt].lottozahl+']').css('backgroundColor', "rgb(255, 255, 255)");
                    }else{
                        $('[data-highlight='+content[cnt].lottozahl+']').css('backgroundColor', "rgb(192, 192, 192)");
                    }

und

//Farbwechsel
            if(bgcolor === 'rgb(192, 192, 192)'){
                $(this).css('backgroundColor', "rgb(255, 255, 255)");
                aktiv = 1;
            }else{
                $(this).css('backgroundColor', "rgb(192, 192, 192)");
                aktiv = 0;
            }

So sollten die Farben sein, wie du es haben wolltest.
 
Hi Heiko,
Wir haben heute Samstag.. lol

Ich versuche, mich jetzt deutlicher auszudrücken..

Der Sinn liegt darin, dass man nach jeder Ziehung die Zahlen gegebenenfalls deaktiviert, oder wieder aktiviert werden können..

Sollen Zahlen deaktiviert werden, klickt man auf die Zahl, die man deaktivieren möchte.
Der Hintergrund wird grau, und die Zahl wird in der Datenbank auch auf "0" gesetzt..

Das funktioniert auch super, dank deiner tollen Bemühungen!!

Jetzt zum Problem !

Wenn ich die Seite wieder neu aufrufe, werden mir alle Zahlenfelder in weiß angezeigt.
Auch bei den Nicht-Aktiven Zahlen wird der Hintergrund nicht grau, sondern auch weiß angezeigt.
Wie soll ich jetzt sehen, welche Zahlen deaktiviert sind, ohne auf die Datenbank zu sehen.

Das heißt..
Über das SELECT muss es doch auch möglich sein, dass die Zahlen mit grauen Hintergrund auch nach Tagen noch grau sind.
Und wenn ich dann auf eine NICHT-AKTIVE Zahl klicke, wo der Hintergrund immer noch grau sein soll, sollte der Hintergrund wieder weiss werden, und der Wert auf "1" gesetzt.

ps.. Gib nicht zu viel Geld beim Einkaufen aus.. Ich kann so einen tollen Mann wie dich leider nicht bezahlen... simple
 
CreativPur hat gesagt.:
Wenn ich die Seite wieder neu aufrufe, werden mir alle Zahlenfelder in weiß angezeigt.
Auch bei den Nicht-Aktiven Zahlen wird der Hintergrund nicht grau, sondern auch weiß angezeigt.
Wie soll ich jetzt sehen, welche Zahlen deaktiviert sind, ohne auf die Datenbank zu sehen.
Zum Vergrößern anklicken....
Genau das macht mein Script.
Solange Du an den Datenbank werden nicht veränderst.
Dafür zuständig ist:
Code: 
//Ajax beim Seite laden
        $.ajax({
        type: "POST",
            url: "test.php",
            data: {
                load: 1
            },
            dataType: 'json',
            cache: false,
            success: function(content) {
                var cnt = Object.keys(content).length;
                while(cnt > 0){
                    cnt = cnt -1;
                    if(content[cnt].aktiv == 1){
                        $('[data-highlight='+content[cnt].lottozahl+']').css('backgroundColor', "rgb(255, 255, 255)");
                    }else{
                        $('[data-highlight='+content[cnt].lottozahl+']').css('backgroundColor', "rgb(192, 192, 192)");
                    }
                    $(this).css('background-color', 'red');
                }
            }
        });
Der holt sich auch der der test.php die Daten, und weißt denen den Hintergrund zu.
in der test.php ist dieser Abschnitt dafür zuständig:
PHP: 
if (isset($_POST["load"]) && !empty($_POST["load"])) $load = 1; else $load = 0;

if($load == 1){
    $sql = "SELECT lottozahl, aktiv FROM lottozahlen";
    $statement = $mysqli->prepare($sql);
    $statement->execute();
    $result = $statement->get_result();
    $i=0;
    while($row = $result->fetch_object()) {
        $array_ergebnis[$i]['lottozahl'] = "$row->lottozahl";
        $array_ergebnis[$i]['aktiv'] = "$row->aktiv";
        $i++;
    }
    echo json_encode($array_ergebnis);
    exit();
}
Wenn load = 1 ist soll er in die IF-Abfrage springen und gibt die Daten an das JS weiter per Echo.
(Du hast wie ich gesehen habe, dies auf 0 gesetzt, was aber auch gehen sollte
und das JS setzt entsprechend den Hintergrund.
Bei mir funktioniert dies wunderbar.
Kann man sich das Online irgendwo ansehen, wie du es momentan hast.
Denn so in dem wie Du es hast sehe ich keinen Fehler, warum er bei dir alles wieder auf Weiß ändert.

P.S. nene das habe ich nicht. ich bin ein sparsamer Mensch ;)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück