• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Web SQL - Eintrag anhand einer Information löschen

D

Dexter1997

Neues Mitglied
Hallo Freunde, folgendes habe ich bis jetzt nicht hingekriegt:

Ich habe eine Webseite erstellt, auf der Man Bilder anzeigen lassen kann. Die Bildpfade sind in einer WebSQL-Datenbank gespeichert. Bei einem Klick auf ein Bild sollen das Bild und der dazugehörige Datenbankeintrag gelöscht werden. Wie realisiere ich dieses Vorhaben?

Hier meine Quelltexte:

index.html
Code: 
<html>
    <head>
        <title>Datenbanken - Übung</title>
        <script src="index.js"></script>
    </head>
    <body>
        <button onclick="erstelle_datenbank()">Datenbank erstellen</button>
        <button onclick="loesche_tabelle()">Datenbank löschen</button>
        <hr>
        
        <input id=name>
        <button onclick="eintrag_erstellen()">Eintrag erstellen</button>
        <hr>
        
        <button onclick="eintraege_anzeigen()">Einträge anzeigen</button>
        <h1>Alle Einträge</h1>
        <div id="anzeige">
        </div>   
    </body>
</html>

index.js
Code: 
var datenbank = openDatabase('Datenbank', '1.0', 'Test DB', 2 * 1024 * 1024);

function erstelle_datenbank()
{
    datenbank.transaction(function (tx)
    {
         tx.executeSql('CREATE TABLE IF NOT EXISTS bilder (pfad TEXT)');
    });
}

function loesche_tabelle()
{
    datenbank.transaction(function (tx)
    {
         tx.executeSql('DROP TABLE bilder');
    });
}

function eintrag_erstellen()
{
    datenbank.transaction(function (tx)
    {
        tx.executeSql('INSERT INTO bilder (pfad) VALUES ("bilder/test1.bmp")');
        tx.executeSql('INSERT INTO bilder (pfad) VALUES ("bilder/test2.bmp")');
        tx.executeSql('INSERT INTO bilder (pfad) VALUES ("bilder/test3.bmp")');
    });   
}

function eintraege_anzeigen()
{
    datenbank.transaction(function (tx)
    {
         tx.executeSql('SELECT * FROM bilder', [], function (tx, results)
        {
            for(var i = 0; i < results.rows.length; i++)
            {
                anzeige = document.getElementById("anzeige");
                var bild = document.createElement("img");
                bild.src = results.rows.item(i).pfad;
                anzeige.appendChild(bild);
            }
        }, null);
    });
}

Ich danke für alle Antworten!
 
Dexter1997 schrieb:
Hallo Freunde, folgendes habe ich bis jetzt nicht hingekriegt:

Ich habe eine Webseite erstellt, auf der Man Bilder anzeigen lassen kann. Die Bildpfade sind in einer WebSQL-Datenbank gespeichert. Bei einem Klick auf ein Bild sollen das Bild und der dazugehörige Datenbankeintrag gelöscht werden. Wie realisiere ich dieses Vorhaben?

Hier meine Quelltexte:

index.html
Code: 
<html>
    <head>
        <title>Datenbanken - Übung</title>
        <script src="index.js"></script>
    </head>
    <body>
        <button onclick="erstelle_datenbank()">Datenbank erstellen</button>
        <button onclick="loesche_tabelle()">Datenbank löschen</button>
        <hr>
      
        <input id=name>
        <button onclick="eintrag_erstellen()">Eintrag erstellen</button>
        <hr>
      
        <button onclick="eintraege_anzeigen()">Einträge anzeigen</button>
        <h1>Alle Einträge</h1>
        <div id="anzeige">
        </div> 
    </body>
</html>

index.js
Code: 
var datenbank = openDatabase('Datenbank', '1.0', 'Test DB', 2 * 1024 * 1024);

function erstelle_datenbank()
{
    datenbank.transaction(function (tx)
    {
         tx.executeSql('CREATE TABLE IF NOT EXISTS bilder (pfad TEXT)');
    });
}

function loesche_tabelle()
{
    datenbank.transaction(function (tx)
    {
         tx.executeSql('DROP TABLE bilder');
    });
}

function eintrag_erstellen()
{
    datenbank.transaction(function (tx)
    {
        tx.executeSql('INSERT INTO bilder (pfad) VALUES ("bilder/test1.bmp")');
        tx.executeSql('INSERT INTO bilder (pfad) VALUES ("bilder/test2.bmp")');
        tx.executeSql('INSERT INTO bilder (pfad) VALUES ("bilder/test3.bmp")');
    }); 
}

function eintraege_anzeigen()
{
    datenbank.transaction(function (tx)
    {
         tx.executeSql('SELECT * FROM bilder', [], function (tx, results)
        {
            for(var i = 0; i < results.rows.length; i++)
            {
                anzeige = document.getElementById("anzeige");
                var bild = document.createElement("img");
                bild.src = results.rows.item(i).pfad;
                anzeige.appendChild(bild);
            }
        }, null);
    });
}

Ich danke für alle Antworten!
Zum Vergrößern anklicken....

Code: 
DELETE FROM bilder WHERE id = ?
 
Das Thema wird von "HTML" nach "JavaScript" verschoben, da 1.) die Auszeichnungssprache für das Anliegen überhaupt nicht "qualifiziert" ist, und 2.) dafür ein JavaScript mit der Funktion eintrag_loeschen(id) zum Einsatz kommt!
 
"Funktioniert nicht" ist ja eine dolle Problembeschreibung. Ich sehe auch nicht, wo du überhaupt mit Bildern hantierst.
 
Ich denke da fehlt es einfach an JS Verständnis...

Javascript: 
function eintrag_loeschen(id)
{
    datenbank.transaction(function (tx)
    {
        tx.executeSql('DELETE FROM bilder WHERE id = ?', [id]);
    });
}

function eintraege_anzeigen()
{
    datenbank.transaction(function (tx)
    {
         tx.executeSql('SELECT * FROM bilder', [], function (tx, results)
        {
            for(var i = 0; i < results.rows.length; i++)
            {
                anzeige = document.getElementById("anzeige");
                var bild = document.createElement("img");
                bild.src = results.rows.item(i).pfad;
                bild.bildId = results.rows[i].id;
                bild.onclick = function () {
                    eintrag_loeschen(this.bildId);
                    this.parentNode.removeChild(this);
                };
                anzeige.appendChild(bild);
            }
        }, null);
    });
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben